Sass - Installation

In this chapter, we will learn the step-by-step procedure to install Ruby, which is used for executing the SASS files.

System Requirements for SASS

• Operating System − Cross-platform
• Browser Support − IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera
• Programming Language − Ruby
  

Sass - Syntax

In this chapter, we will study about SASS Syntax. SASS supports two syntaxes namely SCSS and Indented syntax.

• The SCSS (Sassy CSS) is an extension of CSS syntax. This means every valid CSS is a valid SCSS as well. SCSS makes much easier to maintain large stylesheets and can recognize vendor specific syntax, Many CSS and SCSS files use the extension .scss.
  

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

Sass - CSS Extensions

In this chapter, we will study about CSS Extensions. CSS Extensions can be used to enhance the functionality of the web pages. The following table lists down some of the CSS extensions used in SASS −

S. No.	CSS Extension & Description

Sass - Comments

In this chapter, we will study about Sass Comments. Comments are non-executable statements, which are placed in source code. Comments make source code easier to understand. SASS supports two types of comments.

Sass - Script

SASS uses a small set of extensions known as SassScript which can be included in the SASS documents to compute variables from property values and uses properties of variables, arithmetic, and other functions. SassScript can also be used with selectors and property names while using mixins (Mixins allows to re-use CSS styles throughout the stylesheet).

Sass - @-Rules and Directives

The following table lists all the rules and directives which you can use in SASS.

S. No.	Directives & Description
1	@import It imports the SASS or SCSS files, it directly takes the filename to import.
2	@media It sets the style rule to different media types.

Sass - Control Directives & Expressions

In this chapter, we will study about Control Directives & Expressions. Styling based on some conditions or applying the same style many times with variations can be accomplished by using control directives and expressions, which are supported by SassScript. These control directives are advanced options used mainly in mixins. They require considerable flexibility, as they are a part of Compass libraries.

Sass - Mixin Directives

Mixins allow creating a group of styles, which are reusable throughout your stylesheet without any need to recreation of non-semantic classes. In CSS, the mixins can store multiple values or parameters and call function; it helps to avoid writing repetitive codes. Mixin names can use underscores and hyphens

Sass - Function Directives

In this chapter, we will study about Function Directives. In SASS, you can create your own function and use them in your script context or can be used with any value. Functions are called by using the function name and with any parameters.

Sass - Output Style

In this chapter, we will study about SASS Output Style. The CSS file that the SASS generates consists of default CSS style, which reflects the structure of document. The default CSS styling is good but might not be suitable for all situations; on other hand, SASS supports many other styles.
It supports the following different output styles −

Extending Sass

You can extend the functionality of SASS to provide different types of features and customizations for users. To make use of these features, user should have knowledge of Ruby.