less
less安装less语法使用sass安装sass语法使用
代码编译风格
less安装
需要先安装nodejs（因为sass/less都是基于js开发的。node -v 检查是否安装成功）全局安装less命令：npm i less -g（权限不够：sudo npm install less -g 最高权限安装。vscode不用装，直接用插件）vscode安装less：直接加一个easy less插件vscode使用less：直接新建一个.css和.less文件，html中引入.css或.less文件webstorm安装less：设置–工具–File Watchers–左下方“+”号–点击less–修改Program为：node安装路径下的lessc（比如：C:\Users\Administrator\AppData\Roaming\npm\lessc）webstorm使用less：新建stylesheet–less file ，新建的less里面自带css
less语法使用
可使用css语法嵌套 ------------后代直接写在里面，不超过三层父选择器-----&符号-----可以解决嵌套不超过三层的问题变量 ----------@定义变量，后代用@名字取值 作用域：只能在同一个{} 变量在字符串中需要用{}包起来：比如"@{url}01.png"混合 -----------引用其他类的样式，直接写其他类 有参混合：无参数，比如：.box;或.box();或.box() 无参混合：有参数，比如：.box(参数值); 缺点：有多个参数时，引用传值需要一一对应 @arguments ：所有参数按顺序填写时可用@arguments代替运算 ----------基本运算或运算函数。比如round、ceil取整等等继承 ----------:extend 伪类选择器，结果与混合一样的。但是继承不能有参数判断 ----------关键词when（与and 或, 非not）可导入其他文件@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再比较
}
sass安装
也要先安装nodejsvscode安装sass：直接加一个live sass compiler插件。重启点右下角 watchingvscode使用sass：直接新建一个.css和.sass文件，html中引入.css或.sass文件
sass语法使用
与less大多相同。sass声明变量用符号
,
使
用
也
用
, 使用也用
,使用也用(sass变量在字符串中用#{$},less用@{})sass用混合前面加上@mixin ，调用加上@include控制指令 判断@if 、循环@for @each @while函数更强大：比如random()等，更可以自定义函数@function(){}可导入其他文件@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
;
}
代码编译风格
Nested：最后的大括号缩进到上面Expanded：不缩进Compact：压缩至，一个选择器整体占一行compressed：究极压缩，到没得空格更改编译风格：koala软件：http://www.koala-app.com/ ，勾选auto compile就行。需要处理的文件路径不要有中文哈
