Getting started with scss installation to using advanced syntax

1. The basic concept of sass

Sass is the "preprocessor" of css, a specialized css programming language that
adds variables, functions, calculations, nested relationships and other usages, making css writing more concise and clear.

2. Installation steps of scss

1. First check whether sass has been installed, enter sass -v or sass --version in cmd

sass -v

sass --version

Use any of the above commands, and the following situations have already been installed.
1.52.1 complied with dart2js 2.17.1
ruby ​​1.52.1
Ruby Sass 3.7.4
There are differences in versions, please ignore

2. If the version number does not appear, execute the command in cmd

npm install -g sass

If it is a Mac computer, the computer will come with ruby, you can also use ruby ​​to install

sudo gem install sass

After the installation is complete, perform the first step, and then check the version number. If there is a version number, the installation is complete.

3. Sass version and semi-automatic monitoring

1. About the version
   The suffix of early sass is .sass
   3.0, the suffix is ​​changed to .scss This suffix uses css syntax

2. Use the semi-automatic monitoring method
   Here is to realize the change of the scss file and automatically generate the css file

1. First, there are two folders in the project directory, one is scss and the other is css. The scss folder stores sass files, and the css folder stores compiled css files. Create a new page1.scss in the sass
   folder File
   directory structure:
   

2. In the upper-level parent directory of the scss and css folders, open the cmd window
   , and note that Chinese cannot appear in the project path, otherwise an error will be reported
   Enter in the cmd window

sass scss/page1.scss:css/page1.css

3. Execute commands in cmd

sass -w scss:css

-w indicates the meaning of watch monitoring, that is, as long as there is a change in the scss folder, it will be compiled into the css folder immediately, which realizes semi-automation. If we modify the
content of the scss file, it will be automatically generated into the css file synchronously
. If the command is not executed successfully, you can press ctrl + c to exit

Four. The basic syntax of sass

At this point, you can finally start writing sass code, first learn the basic syntax.

1. Nesting rules
   According to the nesting relationship of the html structure, use {} in the sass file

// For example: there is an html structure.box>a
Note: Because the installation version is different, some writing Chinese comments in the scss file will report an error, try not to use Chinese comments

.box {
	border: 1px solid #000;
	a{
		text-decoration: none;
	}
}

The style is as follows:

2. parent selector
   

3. The use of variables
   a. The reading order of variables

$a:100px;
$b:center;
$c:#f00;
$zts:#0aa1ed;
div {
    width: $a;
    height: 100px-10px;
    text-align: $b;
    color: $c;
    background-color: $zts;
    //border-color: $hello;
    $hello: green;
    p {
        background-color: $hello;
    }
}

b. Variables have scope.
Global variables are directly written in the scss file.
Local variables are written in a selector {}. Only selectors within the scope of {} can use local variables.

3. Calculation function
   Generally, it is not recommended to use sass for calculation, and it is recommended to use js for calculation. Because in the process of using sass for calculation, some computers can calculate and compile, and some will report
   an error or not compile directly
   .
   , when using the division calculation, it will be compiled into the following error code:
   

4. Interpolation statement
   format: #{variable name}
   We cannot directly use the variable name as the name of the selector.
   If you need to use the variable name, you need to use #{} to wrap the variable name before it can be used, otherwise an error will be reported
   

5. Mixing & Inheritance & Placeholders

1. Syntax of Mixed Directives
   @mixin The method of creating mixed directives, the custom name of the directive cannot start with a number
   @include Use the name of the mixed directive
   
   

2. Inheritance
   An element uses all the styles of another element, pay attention! It is all styles, inheritance cannot select partial styles
   @extend Inheritance rules, the inheritance rules are followed by the name of the selector to be inherited, note that the selector must be written in full, inheritance A group selector will be formed after compilation to make the code more optimized.
   Inheriting multiple selectors can use commas to connect the names of multiple selectors
   

3. The placeholder selector%
   The style of the placeholder selector can be inherited, but the placeholder will not be compiled, similar to the generic syntax
   

6. Advanced Grammar

1. Conditional statement
   @if(judgment condition){condition is true}@else{condition is false}
   @if(judgment condition){condition 1 is true}@else if(judgment condition 2){condition 2 is true}@ else{Execute here when none of the above conditions are satisfied}
   Note: The first condition judgment cannot use & or | in sass to use the keyword and or or
   condition judgment method > < >= <= !== == These are all available use
   

2. Loop statement
   @for $i from 1 to 5{ }
   @for means for loop
   $i means loop variable i
   Note: In the for loop here, the variable can only increase by 1 each time
   form 1 to 5: means from 1 to 5, but Note that 5 is not included

   @for $i from 1 through 5 { } Similar to the above, the difference is that the end value 5 is included here