Easy Compile
ctrl+s //执行编译

1 变量

  1. $txtColor:"#ff2d51";
  2. div{
  3.     color:$txtColor;
  4. }

2 嵌套

div{
   color:red;
    p{
        width:100px;
        height: 100px;
    }
}

3 @mixin(函数)

@mixin  wh {
    width:100px;
    height: 100px;
}
.one{
    @include wh;
}

3-1 定义一个带默认参数的@mixin函数

宏函数

@mixin  wh($w:100px,$h:100px){
    width:$w;
    height: $h;
}
.one{
    @include wh;
}
.two{
    @include wh(200px,300px);
}

4@ for

@for $i from 1 through 12 {
    .col-#{$i}{
        width:$i/12*100%
    }
}

5 @if-@else

@mixin  v-h($val:true) {
    @if $val {
        display: block;
    }@else{
        display: none;
    }  
}
.v{
    @include v-h;
}
.h{
    @include v-h(false)
}

6 @extend可以获取另一个class

.three{
    @extend .two;
    background-color: red;
}

7 map的数据结构,类型json

$colors:(
    success:#398439,
    warning:#ec971f,
    danger:#c9302c
);
.btn-danger{
    background-color: map-get($map: $colors, $key:danger );
}

8 @function 定义了一个颜色函数

$colors:(
    success:#398439,
    warning:#ec971f,
    danger:#c9302c
);
@function color($key){
    @return map-get($map:$colors , $key: $key)
};
.btn-danger{
    background-color: color(danger);
}
.btn-success{
    background-color: color(success);
}