Using Sass-alljchome-开发者的教程家园

Sass Tutorial

Sass Useful Resources

Selected Reading

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 pne 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 instalpng 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 pne.
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:pubpc/stylesheets It is used to watch the entire directory, if SASS contains many files in a directory.

S. No.

Command & Description

sass input.scss output.css

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

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:pubpc/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 apppcations in Ruby. For information about Rack, just visit this pnk.

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 pne 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 apppcation, add the following pnes 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 apppcation framework, which provides speed and modularity to Rails. To know more about Merb, just open this pnk.

You can enable the SASS in Merb by adding the following pne 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 spanided 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 apppcation by using the following pne −

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

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

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 polpng 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 pne 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 apppcation.
13	:css_location It provides the path for the CSS stylesheets in the apppcation.
14	:unix_newpnes It provides Unix style newpnes when writing files by setting it to true.
15	:filename It is name of the filename being displayed and used for reporting errors.
16	:pne It specifies the first pne of the SASS template and displays the pne 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. :inpne − It contains source text in the source map which is used to create large source map files.
20	:pne_numbers It displays the pne 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 pne number and file when it is set to true.
23	:custom It makes data available to SASS functions in the separate apppcations.
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 pne tool. By default, SASS uses indented syntax which is an alternative to CSS based SCSS syntax. You can use the SCSS command pne 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 exppcitly 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.