Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Better Sass integration with Sprockets 2.x
Ruby

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
lib
spec
.gitignore
Gemfile
LICENSE
README.md
Rakefile
sprockets-sass.gemspec

README.md

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.

Something went wrong with that request. Please try again.