Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

executable file 133 lines (97 sloc) 3.081 kb

sprockets-sass

Better Sass integration with Sprockets 2.0

When using Sprockets 2.0 with Sass you will eventually run into a pretty big issue. //= require directives will not allow Sass mixins, variables, etc. to be shared between files. So you'll try to use @import, and that'll also blow up in your face. sprockets-sass fixes all of this by creating a Sass::Importer that is Sprockets aware.

Note: This works in Rails 3.1, thanks to the sass-rails gem. But if you want to use Sprockets and Sass anywhere else, like Sinatra, use sprockets-sass.

Features

  • Imports Sass partials (filenames prepended with "_").
  • Import paths work exactly like require directives.
  • Imports either Sass syntax, or just regular CSS files.
  • Imported files are preprocessed by Sprockets, so .css.scss.erb files can be imported. Directives from within imported files also work as expected.
  • Automatic integration with Compass.
  • Supports glob imports, like sass-rails.

Installation

$ gem install sprockets-sass

Usage

In your Rack application, setup Sprockets as you normally would, and require "sprockets-sass":

require "sprockets"
require "sprockets-sass"
require "sass"

map "/assets" do
  environment = Sprockets::Environment.new
  environment.append_path "assets/stylesheets"
  run environment
end

map "/" do
  run YourRackApp
end

Now @import works essentially just like a require directive, but with one essential bonus: Sass mixins, variables, etc. work as expected.

Given the following Sass partials:

// assets/stylesheets/_mixins.scss
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}
// assets/stylesheets/_settings.scss
$color: red;

In another file - you can now do this - from within a Sprockets asset:

// assets/stylesheets/application.css.scss
@import "mixins";
@import "settings";

button {
  @include border-radius(5px);
  color: $color;
}

And GET /assets/application.css would return something like:

button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: red; }

Compass Integration

As of version 0.3.0, Compass is automatically detected and integrated. All you have to do is configure Compass like you normally would:

require "sprockets"
require "sprockets-sass"
require "sass"
require "compass"

Compass.configuration do |compass|
  # ...
end

map "/assets" do
  environment = Sprockets::Environment.new
  environment.append_path "assets/stylesheets"
  run environment
end

# etc...

The load paths and other options from Compass are automatically used:

// assets/stylesheets/application.css.scss
@import "compass/css3";

button {
  @include border-radius(5px);
}

Copyright

Copyright (c) 2011 Peter Browne. See LICENSE for details.

Jump to Line
Something went wrong with that request. Please try again.