css预处理器（less、sass）

less安装

1. 需要先安装nodejs（因为sass/less都是基于js开发的。node -v 检查是否安装成功）
2. 全局安装less命令：npm i less -g（权限不够：sudo npm install less -g 最高权限安装。vscode不用装，直接用插件）
3. vscode安装less：直接加一个easy less插件
4. vscode使用less：直接新建一个.css和.less文件，html中引入.css或.less文件
5. webstorm安装less：设置–工具–File Watchers–左下方“+”号–点击less–修改Program为：node安装路径下的lessc（比如：C:\Users\Administrator\AppData\Roaming\npm\lessc）
6. webstorm使用less：新建stylesheet–less file ，新建的less里面自带css

less语法使用

1. 可使用css语法
2. 嵌套 ------------后代直接写在里面，不超过三层
3. 父选择器-----&符号-----可以解决嵌套不超过三层的问题
4. 变量 ----------@定义变量，后代用@名字取值
   作用域：只能在同一个{}
   变量在字符串中需要用{}包起来：比如"@{url}01.png"
5. 混合 -----------引用其他类的样式，直接写其他类
   有参混合：无参数，比如：.box;或.box();或.box()
   无参混合：有参数，比如：.box(参数值); 缺点：有多个参数时，引用传值需要一一对应
   @arguments ：所有参数按顺序填写时可用@arguments代替
6. 运算 ----------基本运算或运算函数。比如round、ceil取整等等
7. 继承 ----------:extend 伪类选择器，结果与混合一样的。但是继承不能有参数
8. 判断 ----------关键词when（与and 或, 非not）
9. 可导入其他文件@import

//全局变量---局部变量朝具体类中写
@width:200px;
@url:'../img/';
.box1{
	width:@width;
	background:url("@{url}01.png");
}
//无参混合
.box2{
	.box1;
	height:100px;
}
//有参混合---不能直接生成css，需要引入到其他地方
.box3(@width:1px;@style:solid;@color:red){
	//border:@width @style @color 原本有参混合需要依次写入参数，可用@arguments会替代
	border:@arguments;
}
.box3_last{
	.box3()
}
//运算
.box4{
	width: 200px + 200px; //基本运算
	height: 400px / 4;  //基本运算
	height: round(120.54) ; //可用函数
}
//继承
//与无参混合一样的效果
.box5:extend(.box1){
	height:100px;
}
//判断
.box6(@w) when(@w>0){width:@w}   //基础判断
.box6(@w) when(@w>0) and when(@w<50){width:@w}  //与
.box6(@w) when(@w>0),when(@w>10){width:@w}   //或
.box6(@w) when(@w<10) not when(@w>100){width:@w}   //非
.box7{
	.box6(40px);//这里的有参混合，使用的时候可以自动省略px再比较
}

//使用变量进行计算
@bigsize:60px;
div{
	height:calc(@{bigsize}-20px)
}

sass安装

1. 也要先安装nodejs
2. vscode安装sass：直接加一个live sass compiler插件。重启点右下角 watching
3. vscode使用sass：直接新建一个.css和.sass文件，html中引入.css或.sass文件

sass语法使用

1. 与less大多相同。
2. sass声明变量用符号$,使用也用$(sass变量在字符串中用#{$},less用@{})
3. sass用混合前面加上@mixin ，调用加上@include
4. 控制指令 判断@if 、循环@for @each @while
5. 函数更强大：比如random()等，更可以自定义函数@function(){}
6. 可导入其他文件@import

$width:200px;
@url:'../img/';
@mixin box1{
	width:$width;
	background:url("#{$num}01.png")
}
//无参混合
.box2{
	@include box1;
	height:100px;
}
// 判断 @if
.box3{
    @if 1+1==2{
        width: 500px;
    }
}

//循环 @for
//from to 从1到5，不包括5
//from through 从1到5，包括5
@for $num from 1 through 5 {
    // .item{
    //   width:$num * 1px;
    // }
    .item:nth-child(#{$num}){  //less中写@{num}
        width: $num * 1px;
    }
  }
  
// 循环 @each （遍历列表）
@each $color in red,blue,green,yellow,pink {
    // .eachbox{
    //     width: $color;
    // }
    .#{$color}{
        width: 300px;
    }
}

// 循环 @while
$numb : 0;
@while $numb < 5 {
    .box{
        width: $numb * 2px;
    }
    $numb : $numb + 1;
}

// 函数
.box1{
    //random() 取0-1随机值
    width: random(); 
    //rgba颜色范围0-255  重点：动画时候可以随机渐变颜色
    background: linear-gradient(45deg,rgba(random() * 255, random()*255, random()*255, 0.5),
                                rgba(random() * 255, random()*255, random()*255, 0.5) );
}

//自定义函数
@function add($a,$b){
    @return $a + $b;
}
.myhanshu{
    width: add(5,6) * 1px;
}

//sass使用变量进行计算
$bigsize:60px;
div{
	height:calc(#{$bigsize}-20px)
}

代码编译风格

1. Nested：最后的大括号缩进到上面
2. Expanded：不缩进
3. Compact：压缩至，一个选择器整体占一行
4. compressed：究极压缩，到没得空格
5. 更改编译风格：koala软件：http://www.koala-app.com/ ，勾选auto compile就行。需要处理的文件路径不要有中文哈