The basic understanding of SASS

The grammatical application of sass

1. Syntax

Sass has two suffix files: a suffix named sass, no curly braces and semicolons, and the Scss file we use here, similar to the CSS file format we normally write, using curly braces and semicolons. All of the Sass files described in this tutorial refer to files with the suffix named Scss.

Syntax for file suffix named sass

Body

Background: #eee

font-size:12px

P

Background: #0982c1



Syntax for file suffix named Scss

Body {

Background: #eee;

font-size:12px;

}

p{

Background: #0982c1;

}

The Sass Import (@import) rule differs from CSS in that the @import scss file is merged in to generate only one CSS file. But if you import CSS files in the Sass file like @import ' Reset.css ', the effect is the same as the normal CSS import style file, the imported CSS file will not be merged into the compiled file, but in a @import way.



All Sass import files can ignore the suffix name. Scss. Generally speaking, the underlying file naming method begins with _, such as _mixin.scss. This kind of file can not be underlined when importing, can write @import "Mixin".

2. Variables

The SASS variable must be a $ start, followed by the variable name, and the value of the variable and the variable name need to be separated by a colon (just like the CSS property setting), or the default value if the value is appended with!default.

Common variables

Can be used at global scope after definition

Default variables

The default variable for SASS only needs to be appended with!default after the value.

Special variables

In general, the variables we define are attribute values that can be used directly, but must be used as #{$variables} If the variable is a property or, in some special cases, inferior.

Multi-valued variables

Multi-valued variables are categorized as list type and map type, simply speaking, the list type is a bit like the array in JS, and the map type is a bit like the object in JS.



List

The list data can be separated by spaces, commas, or parentheses, using nth ($var, $index) values. There are many other functions for the list data operation such as length ($list), join ($list 1, $list 2,[$separator]), append ($list, $value, [$separator]), etc., refer to Sass Functions (search list Functions)

Multi-valued variables are categorized as list type and map type, simply speaking, the list type is a bit like the array in JS, and the map type is a bit like the object in JS.

Map

The map data appears in pairs of key and value, where value can be a list. The format is: $map: (key1:value1, Key2:value2, Key3:value3);. Values can be obtained by Map-get ($map, $key). There are many other functions for map data such as Map-merge ($map 1, $map 2), Map-keys ($map), Map-values ($map)



Global variables

Adding!global after the variable value is a global variable. This is not currently available, but will be formally applied in the version after Sass 3.4. The current range of sass variables has been criticized, so there is this global variable.



Mixing (mixin)

Sass Use @mixin to declare a blend, you can pass parameters, parameter names start with a $ symbol, multiple parameters are separated by commas, or you can set default values for parameters. The declared @mixin is called by @include.

Multiple parameter Mixin

The call can pass directly to the value, such as the number of @include passed in the parameter is less than the number of @mixin definition parameters, then in order, the following insufficient use of the default value, such as insufficient no default value error. In addition, you can optionally pass in parameters, using parameter names and values at the same time.

Multi-Set Value parameter Mixin

If a parameter can have more than one set of values, such as Box-shadow, transition, and so on, then the parameter needs to be added three points after the variable, such as $variables ....

The basic understanding of SASS