A Song of Time talks about sass features commonly used in actual projects
A Song of Time talks about sass features commonly used in actual projects
Sass is an auxiliary tool that enhances CSS. It adds advanced functions such as variables, nesting, mixing, and import based on CSS syntax, making CSS more powerful and elegant, and project development more efficient. The css preprocessor uses a specialized programming language to add some programming features to css. Sass can be said to be the most powerful CSS preprocessor. Here is a summary of some commonly used Sass features in actual project development (Sass is developed based on Ruby. You need to install Ruby on Windows systems. Mac does not need to because it comes with Ruby. )
1 Variables
are represented by $ and can also be embedded in strings.
2. $primary: #999
3.
4. // 使用的时候
5. color: $primary
6.
7. // 镶嵌的使用，外面加一个#{}
8. $con: top
9. padding-#{$con}: 2px
2 Calculation
You can calculate directly in the style, and operations such as addition, subtraction, multiplication, and division can be performed.
padding-top: 2px + 30px
3 Nesting
common usage
2. span {
3. display：inline-block
4. }
5. }
When encountering a pseudo-class selector , add an &
2. &:hover {
3. color: red
4. }
5. }
Properties can also be nested
2. font: {
3. size: 12px;
4. weight: 400;
5. }
6. }
4 Mixin
For a style that needs to be reused frequently, you can write a copy first, and then introduce it through @include when you use it later. It also supports passing in parameters.
2. overflow: hidden;
3. text-overflow: ellipsis;
4. white-space: nowrap;
5. }
6.
7. // 使用时
8. div{
9. @include one-line;
10. }
5 Inheritance
is implemented using @extend
2. background-color: red
3. }
4. .content {
5. span {
6. display: inline-block
7. }
8. }
9. .new{
10. @extend .content;
11. }
In addition to inheriting the style of content, .new also inherits all the styles under content.
6. Import external files.
Directly introduce external style sheets into css.
@import url(../../assets/css/config);
7 Conditional statements
Use @if to determine if the conditions are met and use the corresponding style. And @else, @else if
2. @if 4 < 6 {color: red}
3. }
8 Loop statements
support @for, @while, @each
2. .item-#{$i}{
3. color: red
4. }
5. }
6.
7. // 编译后等于
8. .item-1{
9. color: red
10. }
11. .item-2{
12. color: red
13. }
14. .item-3{
15. color: red
16. }
17.
18. //@each
19. @each $boy in school, home {
20. .item-#{$boy} {
21. color: red
22. }
23. }
24. // 编译后等于
25. .item-school{
26. color: red
27. }
28. .item-home{
29. color: red
30. }
31.
32. // @while
33. $i: 2;
34. @while $i < 3 {
35. .item-#{$i} {
36. width: 2px * $i;
37. }
38. $i: $i + 2;
39. }
40. // 编译后
41. .item-2{
42. width: 4px;
43. }
9 Custom function
@function implementation
2. @return $a + 1px;
3. }
4. p{
5. width: Hello(10px)
6. }