Clever Geek Handbook

Dry out my CSS but want to keep the basic CSS syntax

Launching a new rails project and we have a thoughtful color palette and we want to capture that in one place. I used to keep colors in CSS, but I find that I still have the same color across a lot of different selectors as it appears as background color, color, border color, etc. I will also need access to the colors in Javascript. It would be great to just define each ONCE color.

So I would just like to define my color palette in such a way that it can be reused in CSS and Javascript, but I don't want to completely switch to SASS, completely ditching the CSS syntax.

Is there another rails plugin that allows this? I could combine an ERB type solution, but I don't want to do that in case someone has something available.

+2


source to share


4 answers


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



+2


source


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



+2


source


There are several server side parsers like LESS and SASS, but if you want to use the palett mentality in straight CSS, you need to reverse 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"]

It worked really well for us.

+2


source


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

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


source






More articles:


All Articles