Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tag: v0.2.1
Fetching contributors…

Cannot retrieve contributors at this time

executable file 97 lines (70 sloc) 2.479 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.
  • Standard Sass load paths are not touched, so Compass extensions will work as expected.
  • 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; }

Copyright

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

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