Scss understanding and usage

1. what is scss

scss is a preprocessing language for css

Scss is a very useful css-like language. In real work, almost no css is used, but a css-like language is used.

For example: scss, less, stylus, etc., so learning a css language is a must. Since I use more scss, I will briefly introduce the usage of scss that I understand.

First of all, it is an auxiliary tool to strengthen css, how to add on the basis of css:

• variables

• Nested (nested nuts)

• mixin

• Import (inline imports) and some other functions

scss is a version after sass3.0, the suffix is ​​.scss

2. Why use scss

There are also many advantages of scss, mainly divided into the following points:

1. scss is fully compatible with all versions of css.

2. Feature-rich, scss has more functions and features than any other css extension language.

3. Industry recognition, large community, most technology companies and hundreds of developers provide support for the technology.

4. There are countless frameworks using scss, such as: bootstrap, etc.

5. Make css more concise, more adaptable, better readability, easier to maintain code and many other benefits.

3. Use of scss

1. There are three types of annotations:

/* */css中显示，
//css中不显示，
/*重要注释!*/压缩不会被删掉

2. Command to import external css, less, scss files:

@import "../assets/scss/home.scss";

3. Declare variables:

$+变量名+：+变量值；如下：
    $color : red; //声明颜色变量 $color
    $width: 100px; //声明宽度变量 $width
    $left: left;

Fourth, distinguish the default variables:

The default variable only needs to add !default after the variable value to set the default value. Redeclaring the default variable can override the default value; for example:

    $color : yellow !default; //声明默认变量 $color
    $color : purple; //根据需求覆盖默认变量

5. Distinguish between global variables and local variables:

Global variables are variables declared outside the element, local variables are variables declared in the element, and local variables will overwrite global variables when repeated declarations;

Adding the !global keyword after the local variable value can make the local variable a global variable;

  $color : red; //声明颜色变量 $color
  $width: 100px; //声明宽度变量 $width
  $left: left;

 .div {
        $border-color: rgba(28, 46, 208, 0.8); //局部变量
        $bd-color: rgb(223, 15, 195) !global; //加!global变为全局变量
        width: $const;
        height: $const;
        color: $color;
        border: 5px solid $border-color;

        .spans {
            font-size: 30px;
            color: $color;
        }
    }

 .div2 {
        width: $const;
        height: $const;
        border: 5px solid $bd-color; //使用加了!global得全局变量
        border-#{$left}: 10px solid red; //变量嵌套引用：即字符串插值，需要使用 #{} 来进行包裹
    }

6. Inheritance

.class uses @extend

.div2 {
        width: 100px;
        height: 50px;
        border: 5px solid #f00; 
       }
.div3 {
        @extend .div2; //继承.div2中得所有样式
       }

7. Placeholder%

The code block declared with % will not be compiled if it is not called by @extend. The compiled code will merge the same code together, and the code becomes very concise.

 %m5 {
        background-color: rgb(12, 174, 228);
    }

    .div3 {
        @extend %m5;
    }

8. Mix @mixin

Repeat blocks of code, defined using a mixin @mixin command, and calling that mixin using @include

// 在使用@mixin和@include时，传入参数和默认值
    @mixin normalStyle ($width , $height , $color , $defaultValue : orange) {
        width: $width ;
        height: $height ;
        color: $color ;
        background-color: $defaultValue ;
    }

    .div4 {
        //在此处使用并传参
        @include normalStyle (300px, 100px, green, rgb(188, 40, 40));
    }

9. SCSS uses a programmatic approach

 // ·条件语句 
    .div4 {
        p {
            @if 1+1>3 {
                border: 1px solid blue;
            }
            @else {
                border: 2px dashed palevioletred;
            }
        }
    }

10. Three loops in SCSS

1. for loop

There are two ways of @for loop in sass:

① @for $i from <start> through <end>

② @for $i from <start> to <end>

Where $i represents a variable, start represents the start value, and end represents the end value;

through means to include the value of end; to means not to include the value of end;

 @for $i from 1 to 3 {
        .item-#{$i} {
            width: 100px;
            height: 100px;
            border : #{$i}px solid #f00;
        }
    }
//最终编译为：
.item-1 {
            width: 100px;
            height: 100px;
            border : 1px solid #f00;
        }
.item-2 {
            width: 100px;
            height: 100px;
            border : 2px solid #f00;
        }

@for $i from 1 through 3 {
        .item-#{$i} {
            width: 100px;
            height: 100px;
            border : #{$i}px solid #f00;
        }
    }
//最终编译为：
.item-1 {
            width: 100px;
            height: 100px;
            border : 1px solid #f00;
        }
.item-2 {
            width: 100px;
            height: 100px;
            border : 2px solid #f00;
        }
.item-3 {
            width: 100px;
            height: 100px;
            border : 3px solid #f00;
        }

2. while loop

As long as the condition behind @while is true, it will execute until the expression value is false to stop the loop;

    $m : 2;

    @while $m >0 {
        .item-#{$m} {
            width: 100px * $m ;
            height: 100px;
            background-color: aquamarine;
        }

        $m : $m - 1;
    }
//最终编译为：
 .item-#2 {
            width: 100px * 2 ;
            height: 100px;
            background-color: aquamarine;
        }
  .item-#3 {
            width: 100px * 3 ;
            height: 100px;
            background-color: aquamarine;
        }

3. each syntax

    @each $item in item-1,
    item-2 {
        //$item就是遍历了in关键词后面的类名列
        .#{$item} {
            background-color: purple;
        }
    }

    //会编译成 .item-1, .item-2 {background-color:purple;}

11. Custom functions and usage

Use @function to customize functions and use

    @function double($sn ) {
        //SCSS允许自定义函数
        @return $sn * 2;
    }

    .function {
        width: double(200px); //使用在SCSS中自定义的函数
        height: 100px;
        border: 1px solid red;
    }

The above are some commonly used methods and functions summarized by me. If there are deficiencies, please give me more advice.