[idea] CSS Color variables from file



I thought it would be handy if there would be a plugin to auto-suggest variables from a file in the project.

Once could have a .variables file or something and when I type “dark-red” it would look though this file and replace it with the correct color (which I set as a variable in this file). I would see this making css development a lot easier. Is there a package like this, or could somebody add this kind of feature?


Is there a reason you can’t use LESS or SASS in your project? They both offer this kind of feature, not just for colors, and I find that they both allow for working at a higher level of abstraction than CSS itself with other features like mixins and such.


I am not using either one because of the added layer of complication and the compiling step which is annoying me while developing.

But this would not solve my issue, as far as I see. Or would I be able to define less variables and have atom type-hint the variable names or even better values?


Perhaps I’m not understanding what you mean by “type-hint the variable names”? But here’s a screenshot of SCSS being used in conjunction with the atom-color-highlight package:

The atom-color-highlight package sets the background color of color variables and values to be the color that they represent.

Is this the kind of thing you’re talking about?

If you’re just looking for substitution, like typing dark-red and #8B0000 is inserted in its place, I would suggest that maybe the snippets support would work for that.


Yeah, I am looking for the second one. I will look into snippets.


Would you be able to write a package that reads from colors.css and replaces variables on the go?

color.css would maybe look like this

$company-red: rgb(…,…,…);
$company-dark-red: rgb(…,…,…);

Whenever you write in a css file $anything it would check if this var is in the color.css file and if so, replace the whole input with it.

Would that work? Would it be easier to write the color.css in coffee-script so it does not need to be parsed? (Adds additional markup, aka quotes, which is a little annoying).

I would appreciate if you could help me with this, because I am not so experienced with atom packages.


What was wrong with snippets? Didn’t they work?


Well, it would work if I hard-code the colors. But this means I would have to create a snippet for every project. Makes more sense to create a file (like a color guideline) and have a snippet use this file. Easier to share and understand. But I don’t know how to do this.