本文记录scss的基本用法

引入外部文件 @import “xxxxxxx”

1.scss定义变量 $

$fontSize: 100px;
.content {
    font-size: $fontSize
}

2.scss中继承  语法： @extend  XXX

复制代码
.extend {
    color: red;
}
$fontSize: 100px;
.content {
    font-size: $fontSize;
    @extend .extend;
}
复制代码

3.scss中混入可传参设置默认值 语法：定义@mixin  引入@include

复制代码
.extend {
    color: red;
}
@mixin bd($color: red) {
    background-color: $color
}
$fontSize: 100px;
.content {
    font-size: $fontSize;
    @extend .extend;
    @include bd(yellow)
}
复制代码

混入跟继承的区别，继承实在.content加类.extend  混入是clone一份代码放到.content里，编译后的结果

.extend, .content {
    font-size: 26.667vw;
    background-color: yellow;
}

4.scss循环 语法：@for $i from 1 through 30 {}

@for $i from 1 through 10 {
    .pd-#{$i} {padding-bottom: $i  + px}
}

5.遍历  语法： @each $i in red, blue, yellow

复制代码
@each $i in red, blue, yellow {
    .bg-#{$i} {
         background-color； $i  
    }  
}
//或者
$color: (1:purple, 2:green, 3:yellowgreen);
@each $k, $i in $color {
    .bd-#{$k} {
        border: 1px solid $i;
    }
}
复制代码

6.if判断 @if  @else if

@mixin bd($color) {
    @if $color === red { background-color: red}  
    @else if $color === blue{ background-color: blue}  
    @else $red=== blue{ background-color: red} 
}

7.定义函数 语法： @function() { @return 111}

@function double($i) {
    @return $i * 10;
}
 
转自https://www.cnblogs.com/95xdy/p/14668139.html