Sass supports a special type of selector called a “placeholder selector”. These look like class and id selectors, except the
# or . is replaced by
%foo represent Placeholders selector . and then
Lists are the Sass equivalent of arrays, which we can find almost any programming language. They are a data structure containing one or several values, possibly including lists, leading to nested lists. but sass list start from
1 / non-zero ..
- List Delimiters : Two Delimiters space or comma.
It is possible to define your own functions in sass and use them in any value or script context
@if directive takes a SassScript expression and uses the styles nested beneath it if the expression returns anything other than false or null:
@for directive repeatedly outputs a set of styles. For each repetition, a counter variable is used to adjust the output. The directive has two forms:
@for $var from <start> through <end> and
@for $var from
$var can be any variable name, like $i;
@for statement sets
$var to each successive number in the specified range and each time outputs the nested styles using that value of
$var. For the form from … through, the range includes the values of
from ... to runs up to but not including the value of
is compiled to:
@each directive usually has the form @each $var in
. $var can be any variable name, like $length or
<list or map>is a SassScript expression that returns a list or a map.
@each rule sets $var to each item in the list or map, then outputs the styles it contains using that value of $var. For example:
is compiled to:
$map: (key1: value1, key2: value2, key3: value3);
- multiple map
Sass supports standard multiline CSS comments with
/* Multi comment */, as well as single-line comments with
//single comment .