Preprocess SCSS with HAML
I have an app that has some categories: Tomato, Orange, Banana. Each category has it's own color saved in the database: FF0000, FF6600, FFFF00. There're also some posts in the app that belong to a category.
I want HAML and/or SASS to generate classes from the category names/color, like:
.tomato header { background-color: #FF0000; }
.tomato aside { background-color: lighten(#FF0000, 0.5); }
.orange header { background-color: #FF6600; }
.orange aside { background-color: lighten(#FF6600, 0.5); }
.banana header { background-color: #FFFF00; 开发者_开发问答}
.banana aside { background-color: lighten(#FFFF00, 0.5); }
As you can see I want to loop the categories
table and use SASS functions listed here. Here's not working example/pseudo-code:
- @categories.each |category|
:sass
.#{category.slug} header { background-color: ##{category.color}; }
.#{category.slug} aside { background-color: lighten(##{category.color}, 0.5); }
Any tips how I could achieve that?
Things to keep in mind:
- I don't want inline (in post) stylesheets
- I use HAML and SASS (SCSS style)
- I run Rails 3.1
Use the Rails 3.1 asset pipeline to first run your code as ERB and then as Sass (so the filename would be something like application.css.sass.erb) and make a variable available to the ERB that you could iterate over and create some Sass. Will that work in your situation?
精彩评论