SASS, sass tutorial

SASS, sass tutorial

File suffix
Sass has two types of suffix files: sass and sass.
And Semicolon. The other is the scss file we use here.
The css file format is similar. Braces and semicolons are used. In this tutorial
All sass files mentioned above refer to files suffixed with scss. We recommend that you
Use a file with the suffix scss to avoid an error in the strict format of the sass suffix.

Import
The import (@ import) Rules of sass are different from those of CSS. during compilation, @ import
Only one CSS file is generated. However, if you are using sass
File, for example, @ import 'reset.css '.
The imported CSS files are not merged into compiled files.
But exists in @ import mode.
The suffix. scss can be ignored for all sass import files. Generally
The file naming method starts with _, for example, _ mixin. scss. This type of file is imported
You can write @ import "mixin" without underline ".

Note
Sass has two annotation methods, one is the standard css annotation method/**/, and the other
Is a single line comment in the form of a // Double Oblique rod, but this single line comment will not be translated
.

Comment on Double Oblique rod single row
A single line comment is the same as a comment in JavaScript, and uses a slash (//)
But the single line comment is not input into CSS.

Variable
The sass variable must start with $, followed by the variable name, and the variable value and variable name
You need to use colons (:) to separate them (just like setting CSS properties), as shown in
If the value is added! Default indicates the default value.

Mixin)
In sass, @ mixin is used to declare a mixture. parameters can be passed. The parameter name is expressed as $.
Start. Separate multiple parameters with commas (,). You can also set the default value for the parameters. Declared
@ Mixin is called by @ include.

Multiple parameters mixin
You can directly pass in a value during the call. For example, the number of input parameters in @ include is smaller than that in @ mixin.
Defines the number of parameters, which are represented in order. The default values are used in the following scenarios, as shown in figure
If no default value exists, an error is returned. In addition, you can also select input parameters,
Use both the parameter name and value.