Giter Club home page Giter Club logo

sass-rails's Introduction

Official Ruby-on-Rails Integration with Sass

This gem provides official integration for Ruby on Rails projects with the Sass stylesheet language.

Installing

Since Rails 3.1, new Rails projects will be already configured to use Sass. If you are upgrading to Rails 3.1 you will need to add the following to your Gemfile:

gem 'sass-rails'

Configuration

To configure Sass via Rails set use config.sass in your application and/or environment files to set configuration properties that will be passed to Sass.

Options

  • preferred_syntax - This option determines the default Sass syntax and file extensions that will be used by Rails generators. Can be :scss (default CSS-compatible SCSS syntax) or :sass (indented Sass syntax).

The list of supported Sass options can be found on the Sass Website with the following caveats:

  • :style - This option is not supported. This is determined by the Rails environment. It's :expanded only on development, otherwise it's :compressed.
  • :never_update - This option is not supported. Instead set config.assets.enabled = false
  • :always_update - This option is not supported. Sprockets uses a controller to access stylesheets in development mode instead of a full scan for changed files.
  • :always_check - This option is not supported. Sprockets always checks in development.
  • :syntax - This is determined by the file's extensions.
  • :filename - This is determined by the file's name.
  • :line - This is provided by the template handler.

Example

MyProject::Application.configure do
  config.sass.preferred_syntax = :sass
  config.sass.line_comments = false
  config.sass.cache = false
end

Important Note

Sprockets provides some directives that are placed inside of comments called require, require_tree, and require_self. DO NOT USE THEM IN YOUR SASS/SCSS FILES. They are very primitive and do not work well with Sass files. Instead, use Sass's native @import directive which sass-rails has customized to integrate with the conventions of your Rails projects.

Features

Glob Imports

When in Rails, there is a special import syntax that allows you to glob imports relative to the folder of the stylesheet that is doing the importing.

  • @import "mixins/*" will import all the files in the mixins folder
  • @import "mixins/**/*" will import all the files in the mixins tree

Any valid ruby glob may be used. The imports are sorted alphabetically.

NOTE: It is recommended that you only use this when importing pure library files (containing mixins and variables) because it is difficult to control the cascade ordering for imports that contain styles using this approach.

Asset Helpers

When using the asset pipeline, paths to assets must be rewritten. When referencing assets use the following asset helpers (underscored in Ruby, hyphenated in Sass):

asset-path($relative-asset-path)

Returns a string to the asset.

  • asset-path("rails.png") returns "/assets/rails.png"

asset-url($relative-asset-path)

Returns a url reference to the asset.

  • asset-url("rails.png") returns url(/assets/rails.png)

As a convenience, for each of the following asset classes there are corresponding -path and -url helpers: image, font, video, audio, javascript, stylesheet.

  • image-path("rails.png") returns "/assets/rails.png"
  • image-url("rails.png") returns url(/assets/rails.png)

asset-data-url($relative-asset-path)

Returns a url reference to the Base64-encoded asset at the specified path.

  • asset-data-url("rails.png") returns url(data:image/png;base64,iVBORw0K...)

Running Tests

$ bundle install
$ bundle exec rake test

If you need to test against local gems, use Bundler's gem :path option in the Gemfile and also edit test/support/test_helper.rb and tell the tests where the gem is checked out.

Code Status

  • Travis CI
  • Gem Version
  • Dependencies

sass-rails's People

Contributors

chriseppstein avatar josh avatar rafaelfranca avatar spastorino avatar arthurnn avatar josevalim avatar guilleiguaran avatar jonleighton avatar y-yagi avatar jeremy avatar robin850 avatar joenoon avatar andreis13 avatar teeparham avatar fudoshiki avatar robertomiranda avatar schneems avatar bjfish avatar wycats avatar k0kubun avatar olivierlacan avatar matthewd avatar kentaro avatar jsmestad avatar grk avatar dhh avatar betterwithranch avatar carlosantoniodasilva avatar alietz avatar tenderlove avatar

Watchers

Richard avatar Alex Cabrera avatar James Cloos avatar Efrén Carbajal avatar Armando Godinez  avatar Health eHeart Study Tech Team avatar Robert Avram avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.