2

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.

Improve this question
2
  • Note/Update: SASS has abandoned the HAML-influenced syntax in favor of something much more CSS like with curly brackets/braces, semicolons, and colons (for variable definitions) Commented Jan 7, 2011 at 3:28
  • Yes, the SCSS format is clearly a good choice at this point-- I've used it on several projects. For Javascript heavy apps, Csster (github.com/ndp/csster) works great. It's an implementation of CSS in Javascript object literal format, along with Sass-like functions for color management. It's by yours truly, so check it out! Commented Jan 8, 2011 at 23:35

4 Answers 4

Reset to default
2

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

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

Improve this answer

Comments

2

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.

Improve this answer

4 Comments

This, of course, eliminates the key benefit of CSS by removing the indirection between your document and your styles.
I'm against this for the reason Doug gave (you might as well just use inline styles if you're gonna directly associate the class names with the styles they represent). However, there is a related technique that allows you to use both meaningful selectors / class names and reduce redundant styles - see: stackoverflow.com/questions/47487/… (but note that neither of these techniques do anything for ndp's desire to share color definitions between disparate styles).
This is nothing like inline styles you simply are defining that a color is assigned, not what that color is. You are effectively creating a unique color class with from combination of classes. Think of it as light's and dark's.
Re up voted as this post wasn't wrong or unhelpful. This is subjective, and although I don't agree with the post, its not wrong.
0

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 }
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.