Sass's Simple knowledge

I. 1. {} Not required in previous sass, sass file suffix ". Sass"
2. {} is required in sass now, the sass file suffix is ". Scss"
Role: The role of less and sass are used for code simplification and reuse

3. Steps to create a sass file:
-Create a file in websotrm with the suffix name ". Scss"
-Open the Kaola software, drag the entire Web file into the Kaola, click Execute
Compiled so that the suffix named ". Scss" is automatically generated in Webstorm
and ". css" Files and ". Css.map" three files
-Without tube suffix named ". Css.map" file, we mainly use the suffix named
". Scss" and ". css" files

Compile: Sass is loaded from top to bottom, sass files are automatically compiled every moment of our coding process, so
After the code is written, we'll see the effect when we refresh the page, but Webstorm
, the HTML or CSS file in Webstorm will change because it needs to be refreshed.
So after writing the sass file, you need to refresh the webstorm,css in order to see the changes;
In the HTML file, the import is a CSS file, not the sass file;

Note: Koala does not recognize the path of Chinese, so do not name the file in Chinese.
If a webpage is written in half by Sass, then the other half is written in the same way,
Drag the entire file path directly into the koala, and then perform the compilation, and you can continue
Started up.


Two. Syntax
1. How to import the Sass file in sass: @import: "AAA" (Can not need ". Scss" suffix name)
2. How to import CSS files in sass: @import: "Ccc.css" (Must add ". css" suffix name)
3. Single-line comment in sass://; Multi-line Comment:/**/

Three. Variables
1. The symbol is: $
2. A variable is stored with a value: $fontsize: 12px;
3. One variable to store multiple values:
$num: 2;
$num 1:1px 2px 3px 4px; (equivalent to an array of four values)
$num 2:1px 2px, 3px 4px; (equivalent to 2 arrays with two values per array)

Use: p{padding: $num 1} ===> p{padding:1px 2px 3px 4px}

P{margin:nth ($num 2,1)} ===> p{margin:1px 2px}
Nth (variable name, index) function, but here the index is starting from 1, 1 means the first array
(that is, to get the value of an element (array) based on the subscript value, the subscript value starts at 1)
4. When a variable is combined with something other than a variable, such as a selector or a string (px) or a property, you need to use
#{} In terms of variables, so that the variables and other content can be spliced together.
For example: p {width: #{$num}px;} ===> p{width:2px}



Four. Use of default (not in less)
Role: Using the default in the source code is easy for others to introduce the source code to facilitate the change in the value of this variable
If the source code used the following statement: $color: Blue!default; So when someone else wants to change
$color the value of this variable is red, you only need to reset the $color:red; This will cover the
The value before $color. The position of these two statements does not limit who first who is behind.

Five. Nesting
1. Nesting of elements
div{
width:100px;
p{
font-size:12px;
a{
color:red;
&:hover{
Color:blue;
}
}
}
}
Description: A P element is nested inside the div, and a element of a is nested within the P element
Nested the hover attribute of the A element, note here: Must be "&:hover{...}"
This allows the hover property to be set correctly in the SASS

2. Nesting of attributes
div{
border:{
top:1px solid red;
BOTTOM:1PX solid yellow;
Style: {
TOP:1PX solid blue;
}
}
}
Description: Set the Border property in the Div, the Border-top property is nested in the border property,
The Border-bottom property, nested with the Border-style property, is in the Border-style property
The Border-style-top property is also nested in the.

3. Keywords: @at-root nested, causes the element to jump out of its root element
div{
width:100px;
p{
font-size:12px;
@at-root span{
color:red;
}
}
}
Description: The P element is the son element of the Div, and the span element is a separate element that jumps out of the DIV element.

Note: Although nesting has its role, we should reduce the number of nested composite elements in the encoding process.
Encoding. Because the browser parses the CSS selector, it is parsed from right to left, and if too many nested, performance will
have been reduced.

Six. Functions (Conceptual---examples)
1. Mixed function (multiple parameters);
Keywords defined: @mixin; Keyword when referencing: @include
The definition statement must be placed before the reference statement

Definition: @mixin WHB ($w, $h, $b) {
Width: $w;
Height: $h;
border: $b
}

Citation one: div{
@include WHB (10px,20px,1px solid red);
}
Reference two: div{
@include WHB (auto,20px,1px solid red);
}
Note: If you pass the argument to the width of the div with the parameter "auto", the div
Fills the width of its parent element, which is 100%.

2. Mixed function (one parameter)
Definition: @mixin radius ($r) {
Border-radius: $r;
}
Reference: div{
@include radius (2px);
}

3. Mixed function (only one parameter, given default value)
Definition: @mixin color ($col: red) {
Color: $col;
}
Citation one: p{
@include color (yellow); The color in CSS is yellow
}

Reference two: p{
@inclue color (); The color in CSS is red
}

Description: In the definition, given the parameter of this function a default value of "Red",
In reference one, the parameter is "yellow", then the color of P element is yellow;
The color of the P element is the default value defined by the function when there are no parameters passed in the reference two.
, or "red". This is the default value of the reference;
Note, however, that in general, if the function has only one parameter, it can be set to a default value,
If the function has more than one parameter, do not set the default value, because this may be an error.

Seven. Keywords when inheriting references: @extend
Example. mydiv{
width:100px;
height:100px;
border:1px solid red;
}
. div_1{
@extend mydiv; This inherits the CSS style of mydiv.
color:red; And you can write your own style.
}
Sometimes we just need an element to define the style for other elements to use, and we need to
Hide the element used to define the method, the keyword is "%", and precede the hidden element with a "%":
Example:%mydiv{
width:100px;
height:100px;
border:1px solid red;
}
. div_1{
@extend%mydiv; This inherits the style of the mydiv, and also hides the mydiv.
}

Eight. Inheritance and blending of the same and different points
The same point: inheritance and blending are all functions that can be reused for code
Different points: If there are no parameters when reusing, then inheritance is used; Use mixed functions if parameters are available

Nine. Use of loops
If the last data is included with through, if not included, use the To
1. From...through ... (contains the last number)
p{
For $i from 1 through 5{
h#{$i} {
Font-size: #{$i}px;
}
}
}
Description: Embedded 5 elements under the P element and set the font-size for the five elements as follows:
H1{FONT-SIZE:1PX}
H2{FONT-SIZE:2PX}
H3{FONT-SIZE:3PX}
H4{FONT-SIZE:4PX}
H5{FONT-SIZE:5PX}
Note: When you embed a variable in a selector or property value or attribute, you write the #{$ variable name} as this form.

2. From...to ... (Does not contain the last number)
@for $i from 1 to 5{
. a#{$i} {
Font-size: #{$i}px;
}
}

Note: The loop sets four elements and sets the font-size for the four elements as follows:
. a1{font-size:1px}
. a2font-size:2px}
. a3{font-size:3px}
. a4{font-size:4px}

10. Key-value pairs (illustrative)
Defines a key-value pair: $my _map: (a1:1px,a2:2px,a3:3px);
Reference: @each $key, $value in $my _map{
. #{$key} {
Width: $value;
}
}
After this definition, the styles in CSS are:
. a1{width:1px}
. a2{width:2px}
. a3{width:3px}

Sass's Simple knowledge