开发者

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?

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜