”;
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 −
|
| 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.
”;