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
1

sass input.scss output.css

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

sass --watch input.scss:output.css

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

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 config.ru 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"

Caching

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.

Options

You can set the options in the environment.rb file of Rails or config.ru 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
1

:style

It displays style of the output.
2

:syntax

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

:property_syntax

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.
4

:cache

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

:read_cache

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

:cache_store

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

:never_update

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

:always_update

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

:always_check

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.
10

:poll

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

:full_exception

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.
12

:template_location

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

:css_location

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

:unix_newlines

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

:filename

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

:line

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

:load_paths

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

:filesystem_importer

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

:sourcemap

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.
20

:line_numbers

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

:trace_selectors

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

:debug_info

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

:custom

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

:quiet

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.

Encodings

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.

Advertisements