Using Sass


SASS is more powerful and stable that provides power to the basic language by using extension of CSS. You can use SASS in three different ways −

  • As a command line tool
  • As a Ruby module
  • As a plugin for Rack enable framework

If you are using SASS on windows, then you need to install Ruby first. For more information about installing Ruby, refer the SASS Installation chapter.

The following table shows the commands, which are used for executing the SASS code −

S. No. Command & Description

sass input.scss output.css

It is used to run the SASS code from the command line.


sass --watch input.scss:output.css

It informs SASS to watch the file and update the CSS whenever SASS file changes.


sass --watch app/sass:public/stylesheets

It is used to watch the entire directory, if SASS contains many files in a directory.

Rack/Rails/Merb Plugin

Rack is a web server interface, which is used for developing web applications in Ruby. For information about Rack, just visit this link.

You can enable the SASS in the Rails 3 version using the environment.rb file present under the config folder. Enable the SASS for the Rails 3 using the following code −

config.gem "sass"

You can use the following line to the Gemfile for the Rails 3(and above version), as −

gem "sass"

Rails is an open-source web framework that uses web standards such as JSON, HTML, CSS and JavaScript for displaying user interface. To work with Rails, you need to have a basic knowledge of Ruby and object-oriented programming. Learn more about on Rails framework here.

If you want to enable the SASS in Rack application, add the following lines to the file, which is present in the app's root directory −

require 'sass/plugin/rack'
use Sass::Plugin::Rack

Merb is a web application framework, which provides speed and modularity to Rails. To know more about Merb, just open this link.

You can enable the SASS in Merb by adding the following line to the config/dependencies.rb file −

dependency "merb-haml"


SASS caches documents such as templates and partials, which can be reused without parsing them unless they have changed. It makes compilation of SASS files faster and works even better when the templates are divided into separate files, which are all imported into one large file. If you delete cached files, they will be generated again when you compile next time.


You can set the options in the environment.rb file of Rails or file of Rack application by using the following line −

Sass::Plugin.options[:style] = :compact

You can also set options in the init.rb file of Merb by using the following line −

Merb::Plugin.config[:sass][:style] = :compact

There are some options available with SASS and SCSS as described in the table given below −

S. No. Option & Description


It displays style of the output.



You can use indented syntax for sass and CSS extension syntax for scss.



It uses indented syntax to make use of properties. If it is not correct, then it will throw an error. For instance, consider "background: #F5F5F5" in which background is a property name and #F5F5F5 is its property value. You must use colon after the property name.



It speeds up compilation of SASS files. It is set to true by default.



It read only SASS files if cache is not set and read_cache is set.



It can be used to store and access the cached result by setting it to an instance of Sass::CacheStores::Base.



It should never update the CSS file if the template files changes. By default it is set to false.



It should update the CSS file whenever the template files changes.



It should check for the updates whenever the server starts. It will recompile and overwrite the CSS file, if there is an update in the SASS template file.



It uses polling backend for Sass::Plugin::Compiler#watch (which watches the template and updation of CSS files) by setting it to true.



It displays the error description whenever an exception occurs in SASS code within generated CSS file. It displays a line number where an error occurred along with source in the CSS file.



It provides the path for the template directory in the application.



It provides the path for the CSS stylesheets in the application.



It provides Unix style newlines when writing files by setting it to true.



It is name of the filename being displayed and used for reporting errors.



It specifies the first line of the SASS template and displays the line numbers for errors.



It is used to load the paths for SASS template which are included using @import directive.



It is used to import files from file system that uses Sass::Importers::Base sub class to handle string load paths.



It generates source maps which instructs browser to find the SASS styles. It uses three values −

  • :auto − It contains relative URIs. If there is no relative URI, then uses "file:" URI.

  • :file − It uses "file:" URIs, which work locally, not on remote server.

  • :inline − It contains source text in the source map which is used to create large source map files.



It displays the line number for errors reported in the CSS file by setting it to true.



It helps to trace the selectors of imports and mixins when it is set to true.



It provides debug information of SASS file using line number and file when it is set to true.



It makes data available to SASS functions in the separate applications.



It disables the warnings by setting it to true.

Syntax Selection

You can determine which syntax you are using in the SASS template by using the SASS command line tool. By default, SASS uses indented syntax which is an alternative to CSS based SCSS syntax. You can use the SCSS command line program, which is similar to the SASS program, but by the default, it considers the syntax to be SCSS.


SASS uses the character encoding of stylesheets by specifying the following CSS specifications −

  • First, it checks for Unicode byte, next @charset declaration and then Ruby string encoding.

  • Next, if nothing is set, then it considers charset encoding as UTF-8.

  • Determine character encoding explicitly by using @charset declaration. Just use "@charset encoding name" at the beginning of the stylesheet and SASS will assume that this is the given character encoding.

  • If output file of SASS contains non-ASCII characters, then it will use the @charset declaration.