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

Example using include

Different Colors

• Red


• Green


• Blue

Example using arguments

argument.htm


Next, create file argument.scss.

@mixin bordered($width: 2px) { background-color: #77C1EF; border: $width solid black; width: 450px;
}
.style {
@include bordered(2px);
}

argument.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\argument.scss:argument.css

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

.style {
background-color: #77C1EF; border: 2px solid black; width: 450px;
}

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 argument.htm file.
  
• 
  Open this HTML file in a browser, an output is displayed as shown below.
  

Sass – Passing Content Blocks to a Mixin

Description

Block of styles is passed to the mixin for the placement inside the styles. In @content directive location, styles gets included into the mixin.

Variable Scope and Content Blocks

The block of content is evaluated in the scope, which is passed to a mixin where block is defined.

Example

The following example demonstrates the use of passing content blocks to mixin in the SCSS file:

pass_content.htm

Next, create file sample.scss.

@mixin element{ @content;
}
@include element{
.block{
color: green;
}
}

sample.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\sample.scss:sample.css

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

.block { color: green;
}

sample.css

Output

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

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

SASS
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.

Example

The following example demonstrates the use of function directive in the SCSS file: