Sass-Installation and Usage

Different Method to Use Sass

Here we will see how to use Sass. We can use Sass in three different ways - 

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

The table below shows the commands which are used to execute Sass with their description:

Rack/Rails/Merb Plugin

You will use Rack if you want to develop web applications in Ruby. It is a web server interface.

Rails 3 provides a feature that allows you to enable Sass. You can do so by using the environment.rb file in the config folder. To enable Sass to write the following code:

config.gem “sass”

You can also write the following code:

gem “sass”

Rails is an open-source web framework. It uses web standards such as HTML, JSON, JavaScript, and CSS to display the user interface. Before working with rails, you must have a basic understanding of object-oriented programming and rails.

If you want to use and enable Sass in Rack, add the code to the config.ru file that is present in the app’s root directory- 

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

Merb provides modularity and speed to rails as it is a web framework. You can enable Sass in merb by writing the following code in the config/dependencies.rb file.

Dependency “merb-haml”

Caching

Sass catches documents such as partials templates. We can reuse them without parsing unless they have been changed.

It makes the compilation of Sass files faster and can perform even better when they are divided into smaller files that are again imported into one large file. You can delete the cached file, but it will be generated when you compile it next time.

Options

You can set the options in the config.ru file of Rack application or environment.rb file of rails by using the following code:

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

Users can also set options in init.rb file by using the following code:

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

There are some options for SCSS and SASS in the table given below:

Syntax Selection

By using the Sass command-line tool, you can determine which Syntax you are using. As we have studied earlier, Sass sues indebted Syntax, an alternative to CSS bases SCSS syntax. The SCSS command-line program is similar to the Sass Program, so you can also use it. But by default, it has SCSS syntax.

Encodings

It uses the character encoding of stylesheets. It specifies some CSS specifications that are given below.

• First, it checks for Unicode byte, then Ruby string encoding.
• It uses charset encoding as UTF-8 if nothing is set.
• If the output file of Sass contains a non-ASCII character, then it will use the @charset declaration.

FAQs

1. Does the Sass install in node.js and Ruby are same?
   No, they are not the same the node.js Sass is slower than that of Ruby one.
    
2. What is the advantage of using Sass?
   Sass reduces the CSS codes' redundancy and helps developers write code more efficiently.
    
3. How many syntaxes are supported by Sass?
   The two syntaxes supported by Sass are indented and SCSS.
    
4. Explain indented Syntax.
   The indented Syntax is also known as Sass. In this Syntax, CSS can be written concisely. By using the extension of .sass.

Key Takeaways

In this article, we have learned about various methods to install Sass. We also look at multiple methods to use the commands and their description. And have a brief idea about Syntax and encoding in Sass.

Suppose you want to learn more about Sass and its selectors. Then you must have a look at this blog. This will give you a complete idea of the parent selector and the placeholder selector with their usage.