1. Define variables for multiple references
generate page
2. Color transparency
When we only know the hexadecimal notation, but at the same time set the transparency, Sass can automatically convert it into a legal form
=》
3. Grammatical nesting ( this is more commonly used )
Using Sass is very clear about the structure of the code, how to use the following figure to express it
1. This is the nesting relationship of html pages
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app">
<span></span>
<div class="app2">
<a href="#" class="a"></a>
</div>
</div>
</body>
</html>
2. This is how Sass pages are nested
#app{
span{
background-color: black;
}
.app2{
.a{
height: 20px;
}
}
}3. This is the code of the converted css page
#app span {
background-color: black; }
#app .app2 .a {
height: 20px; }
Four, various simple CSS writing skills
1. When we refer to the pseudo-class, in order to avoid duplication of code, we can use the & symbol to replace the current element, also known as the parent element
converted to
2. !global Local variables become global variables
converted to
3. extend = "inheritance
As the name suggests, when we want to inherit any element of the parent element, we can use extend to implement it (but in the current development, I think this attribute can be fully implemented using class elements)
4. If-else conditional statement (similar to other languages we have learned, just add an @ symbol before use, but it feels useless at present)
=》
4. for loop (through means to include, to means not to include)
=》
=》
5. while loop (repeat the output until false, you can customize the loop value)
It should be noted here that the values of the custom cycle need to be separated by spaces
