Syntactically Awesome Style Sheet or simply called as SASS is a CSS preprocessor.
It enables you to create style sheets faster.
Extends the functionality of CSS by allowing you to use variables, nested rules, functions, and
mixins.
SASS is written in Ruby language
LESS, Stylus and PostCSS are few other popular CSS preprocessors.
Sass is more stable, powerful and compatible with all versions of CSS.
It is an open source preprocessor.
It has its own syntax, which compiles to readable CSS. Hence you can write CSS easily (less code
in less time).
You must know that SASS supports two types of syntax:
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
SASS syntax is not widely used.
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.
Variables are defined with a dollar sign ($ ) followed by a variable name
$color: red;
Variables can be a string, color, boolean, null or a list of values.
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.
A Sass expression is the combination of values and operators.
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
Booleans and Nulls
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:
add: 43 + 6; //"plain" numbers added together
add: 43px + 6; //"plain" number added to a pixel value
add: 22em + 8em; //two "em" values added together
add: 22px + 8em;// error
Sass strings are mentioned within single quotes, double quotes or without quotes.
Example:
SCSS file
$default-font: 'Arial';
p { font-family: $default-font, "Verdana", Georgia; }
CSS file
p { font-family: 'Arial', "Verdana", Georgia; }
Map
Maps are key-value pairs.
They are wrapped within parenthesis.
The map never writes their output directly to the CSS file, but map functions do.
Example:
SCSS file
$red-map: (light: #e57373, medium: #f44336, dark: #b71c1c);
p { color: map-get($red-map, light);}
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
The directive used to include the mixin in your document is @include.
