Scss使用

Scss

1.编译scss

在项目所在文件夹中打开集成终端或者cmd

输入：sass -w scss:css

  sass  监听（-w watch）  scss：css --scss文件夹中编译到css文件夹中，注意：其中scss文件夹和css文件夹在同一级，且在统一文件夹下

2.解决中文注释问题

在scss中不能出现中文字符，否则会编译失败，但有可能出现中文注释，因此要在scss文件最顶端加入@charset "utf-8";规则，保证当前文件内可以使用所有能使用utf-8编码规则的文字。

因为scss中注释为//，css中注释为/* */

3.父选择器&

@charset "utf-8";
// 导入文件
// ul >li*3  li颜色不同
ul{
    li{
        width: 50px;
    }
    &>:nth-child(1){background-color: pink;}
    &>:nth-child(2){background-color: plum;}
    &>:nth-child(3){background-color: paleturquoise;}
}
ul{
    li{
        width: 50px;
    }
    &:nth-child(1){background-color: pink;}
    &:nth-child(2){background-color: plum;}
    &:nth-child(3){background-color: paleturquoise;}
}

4.导入其他scss文件夹

@import “写其他scss的文件路径”

@import "1.scss";

3.混合样式mixin

@mixin btn {
    background-color: paleturquoise;
    color: rgb(255, 255, 255);
    font-size: 14px;
    border: 0;
    border-radius: 50%;
}
button{
    @include btn;
    width: 130px;
    height: 40px;
}