Monday, July 11, 2011

Sass partials with Rails 3.1 - use .css.scss

I tried importing partials in Sass for a Rails 3.1.rc4 app today, but for some reason, variables just wouldn't be recognized although they definitely existed in the partial.

The key thing is that your partials have to have the .css.scss extension - not the .scss extension as is shown on the Sass website (http://sass-lang.com/tutorial.html) explaining partial usage.

Here's an example of Sass used in my app:
assets/stylesheets/admin/meals.css.scss:
// Place all the styles related to the admin/meals controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
 
@import "../partials/standard_list";
 
body {
 #meals_index {
  #meal_new_area {
 
  }
  ul#meal_list {
   @include standard_list(meal);
  }
 
 }
}

assets/stylesheets/partials/_standard_list.css.scss:
@mixin standard_list($resource) {
 $light_green: #52D017;
 
 list-style-type: none;

 li {
  ul li {
   display: inline-block;
  }

  ul li.name {
   position: absolute;
  }
  ul li.controls {
   position: relative;
   margin-left: 300px;
   width: 200px;
  }

  ul##{$resource}_list_headers {
   li { 
    font-weight: bold;
   }
  }
  ul.items_within_#{$resource} {
   li.name {}
   li.controls {}
  }

  ul:hover { background: $light_green; }
 }
 
}

No comments:

Post a Comment

Please be considerate in what you say.