SASS
SASS
Extends the functionality of CSS by allowing you to use variables, nested rules, functions, and
mixins.
Sass is more stable, powerful and compatible with all versions of CSS.
It has its own syntax, which compiles to readable CSS. Hence you can write CSS easily (less code
in less time).
SASS Syntax
SCSS Syntax
SASS Syntax
It uses indentation to identify code blocks and newline to separate lines within a block. These files are
saved with the .sass extension.
Sample:
.new
color:#ff0055
font-weight:bold
span
text-transform:uppercase
SCSS syntax
An extension of CSS syntax is SCSS (Sassy syntax). It uses braces to identify code blocks and semicolons to
separate lines within a block. These files are saved with the .scss extension.
Sample:
.new {
color:#00ff55;
font-weight:bold;
}
span {
text-transform:uppercase;}
SASS variables are used to store information.
$color: red;
Variable Interpolation
Variables can be used anywhere in the SASS file.
They can be used (interpolated) in class, property or inside string of a plain text.
Example:
SCSS file
$car: Benz;
$speed: averagespeed;
.#{$car}
{ #{$speed}:336km/h; }
CSS file
.Benz { averagespeed: 336km/h; }
Sass script enables you to compute CSS selector, property or value using Sass expression.
Sass transpiler will evaluate the sass expression before producing the CSS output.
Example:
SCSS file
$car: Benz;
{ car-name: $car; }
CSS file
{ car-name: Benz; }
SASS Datatypes
Supported datatypes
Numbers
Strings
Colors
Lists
Map
Chunking
The process of dividing sentences into segments that do not overlap is known as text chunking.
Specific extraction of noun phrases is known as Noun phrase chunking or NP chunking. Noun phrases
are important as they are often the keywords and are highly useful in information retrieval systems.
Examples of chunks include "the azure blue sky", "world's largest river", etc
Sass can recognize numeric datatype such as integer or real but it cannot recognize standard units such
as em or px.
Example:
Sass strings are mentioned within single quotes, double quotes or without quotes.
Example:
SCSS file
$default-font: 'Arial';
Map
The map never writes their output directly to the CSS file, but map functions do.
Example:
SCSS file
CSS file
p { color: $e57373; }
Mixins
Mixins are used to create a group of styles, which are re-usable throughout the stylesheet.
They can be used to store multiple values or parameters, and are used to call the function as well. Helps
avoid repetitive coding.
@include Directive