I can only use nesting in Sass

Question

I am not sure what I am missing, but I can only use nesting for in my rails files. I want to be able to use mixins and variables as well.

My gem file is the includes sass:

group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'
  gem 'uglifier', '>= 1.0.3'
end

and my css files are name custom.css.scss . What am I missing?

Answer 1

From the Sass doc:

To install Sass in Rails 2, just add config.gem "sass" to config/environment.rb. In Rails 3, add gem "sass" to your Gemfile instead. .sass or .scss files should be placed in public/stylesheets/sass, where they'll be automatically compiled to corresponding CSS files in public/stylesheets when needed (the Sass template directory is customizable… see the Sass reference for details).

I have to put the css files in a sass folder

Answer 2

I expect you're doing something like *= require_tree . in your application.css.scss file to include your stylesheets.

According to the official documentation , this won't work for mixins and variables:

If you want to use multiple Sass files, you should generally use the Sass @import rule instead of these Sprockets directives. Using Sprockets directives all Sass files exist within their own scope, making variables or mixins only available within the document they were defined in

It kinda sucks, but you need to include them all individually, if you want the mixins and variables to work. Including them using require compiles more quickly than using import , and should be preferred unless there are shared variables or necessary dependencies.

Example:

//= require navigation
//= require icons
//= require buttons
@import "variables.css.scss";
@import "mixins.css.scss";
@import "something_else.css.scss";