Sass (Syntactically Awesome Stylesheet) is a css pre-processor, which helps to reduce

Example using Boolean Operations

>SASS stands for Syntactically Awesome Stylesheet..

Example using Sass Parentheses

SASS stands for Syntactically Awesome Stylesheet..




Next, create file style.scss.

p {
font-size: 5px + (6px * 2); color:#ff0000;
}

style.scss

You can tell SASS to watch the file and update the CSS whenever SASS file changes, by using the following command:

sass --watch C:\ruby\lib\sass\style.scss:style.css

Next, execute the above command, it will create the style.css file automatically with the following code:

p {
font-size: 17px; color: #ff0000;
}

style.css

Output

Let us carry out the following steps to see how the above given code works:

• 
  Save the above given html code in parentheses_example.html file.
  
• 
  Open this HTML file in a browser, an output is displayed as shown below.
  

SASS – Functions

Description

SASS supports the use of functions by providing some keyword arguments, which are specified using normal CSS function syntax.

p {
color: hsl($hue: 0, $saturation: 50%, $lightness: 50%);
}

Syntax

HSL stands for hue, saturation, and lightness, which are more intuitive for creating a set of matching colors by using saturation and lightness.

• 
  hue: It represents the degree of color such as 120 for red, 240 for green, 290 for pastel violet etc.
  

•