css预处理工具

css预处理用编程的方式写css

定义变量
逻辑分支
逻辑分支
循环

使用sass

1、下载依赖npm install sass -g
2、新建以scss为后缀的文件
3 、切换到以scss为后缀的文件目录下
4、使用命令 sass --watch index.scss:index.css`实时监控文件`或sass --watch scss:css `目录`

语法

• 变量$变量名:值

$color:red
body{
color:$color
}

• 嵌套

body{
color:$color
h2{
font-size：20px
}
}

• 嵌套中的&

div{
&:hover{
color:red
}
//与div:hover{color:red}一样

}

• 群组嵌套

body{
color:$color
h2，a{
font-size：20px
}
}

• 混入和js定义函数一样

@mixin myStyle{
color:red
}
h2{
@include myStyle;
}

• 混合器传参

@mixin mystyle($w,$h){
width:$w;
height:$h}

body{
@include myStyle(100px,100px);
}

• 参数默认值不传入参数默认100和js函数一样

@mystyle($w：100px,$h:100px){
width:$w;
height:$h}

body{
@include myStyle(100px,100px);
}

• 继承一个css继承另一个css的属性
• 混合器传参

p{
color：red;
font-size：100px
}
a{
@extend p
//这样就继承了p标签的属性
}

注释

• 编译的时候不会被编译的注释//
• 编译时会被编译的注释/**/
• 强力注释（编译时会编译，压缩也存在）/*!*/

导入文件

• import '路径'