scss快速入门

运行环境：需要安装依赖，ruby,然后npm install scss -g

1、变量标识符：$,变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
定义变量：

$color:'red';
$side : 'left';

引用变量

.box{
     color:$color;
}
.rounded {
     border-#{$side}-radius: 5px;
 }

2、计算功能

body {
　　margin: (14px/2);
　　top: 50px + 100px;
　　right: $var * 10%;
}

3、嵌套：不推荐使用多层嵌套，最多使用两层
//可以写成：

div {
　　h1 {
　　　color:red;
　　}
}

备注：属性也可以嵌套，比如border-color属性，可以写成：

p {
　border: {
　　　 color: red;
　}
}

嵌套中常用的&父选这器，&标识符，用法如下：

.empty-content {
        display: flex;

        &-image {
            width: 200upx;
            height: 200upx;
        }
    }
//等价于
.empty-content {
        display:flex;
        .empty-content-image{
            width:200upx;
            height:200upx;
        }
}

3-1选这器
%占位符选这器，%标识符，@extend调用，除非被调用，自身不编译；不能在@media中运行

%icon { 
    transition: background-color ease .2s; 
    margin: 0 .5em; 
} 
.error-icon { 
    @extend %icon; /*错误图标指定的样式... */ 
}

4、代码重用：@extend ;

.class1{}
.class2{
    @extend .class1;
    font-size:18px;
}

另一种代码重用代码宏：@mixin(定义) @include（引入）(其实就是函数)

@mixin class1{}

.class2{
    @include class1;
}

用法二

@mixin class($value:10px){
    float:left;
    margin-right:&value;
}

5、文件插入

@import "path/filename.scss";
@improt "foo,css"

6、if，for,语句判断witch

p{
    @if 1+1==2 {border:1px solid red;}
    @if 5<3{ border:2px dotted red;}
    @if ligtness($color)>30%{
        background-color:red;
    } @else{
        background-color:orange;
    }

}

8、运算符
支持数字的加减乘除、取整等运算 (+, -, *, /, %)
css中定义变量 --开头

body{
    --bg-color:#8ab945;
}
.btn-defaul{
    background-color:var(--bg-color)
}