DRY out my CSS, but want to keep the basic CSS syntax.

Question

Starting a new rails project and we have a well-thought-out color palette, and want to capture that in one place. I have usually kept colors in the CSS, but I find I end up with all the same color in lots of different selectors, as it shows up as a background color, color, border color, etc. I also will occassionally need access to colors in the Javascript. It would be great to just define each color ONCE.

So I'd just like to define my color palette in a way that's re-usable in the CSS and Javascript, but I don't want to go all the way to SASS, abandoning CSS syntax completely.

Is there a rails plugin already made that allows this? I could patch together an ERB type solution, but I don't want to do it if someone else has something readily available.

Answer 1

There is a new project out called {less} that sounds like what you are looking for: http://lesscss.org/

Answer 2

LESS seems to have a rails plugin, and a more css like syntax.

Answer 3

There are several server side parsers like LESS and SASS, but if you want to use the palett mentality in straight CSS you have to revers your thinking. Define basic styles like colors, fonts etc. and apply multiple classes at the tag level.

[style]

.color1{color:red}

.color2{color:blue}

.color3{color:green}

.bcolor1{color:red}

.bcolor2{color:blue}

.bcolor3{color:green}

[/style]

[tag class="color1 bcolor2"]

This has worked very well for us.

Answer 4

Another (pure CSS) way may be to define each color once, and have the several selectors associated with that oe color definition, for example:

body,
p,
#foo,
.bar {color: #802369 }