Less 是一门 CSS 预处理语言，它有变量、混合、嵌套和运算等用法。使我们在写CSS时能更灵活。但Less需要编译成.css文件，编译的方法有多种，如webpack的less-loader和编辑器WebStorm的编译等。
我这里会介绍怎么使用 WebStorm监听less文件编译 和 less的基础语法 。
1.WebStorm监听less文件
- 点击WebStorm左上角的File（文件）选项
- 再点击Setting（设置）选项
- 找到Tool（工具）下的File Watchers（文件监听），再点击右边的 + ， 点击less,会弹出一个选框
- 然后直接点击apply（应用即可），下面三个选项：
1 immediate file synchronization 是 less 和 css 实时编译，
2 trigger watcher regardless of syntax errors 不考虑语法错误
3 trigger watcher regardless of syntax errors 只跟踪根文件。
自己可以按需勾选。
2. less的基本语法
注释
less中有两种注释，分别是 // 和 /**/。
// 这种注释是不会被编译在CSS中的；
/**/ 这种注释会编译在CSS中，如果想CSS中有注释需要使用这种变量
变量的定义： @变量名: 值;
变量的使用： CSS属性: @变量名;
@background-color: #e4393c;
body{
background: @background-color;
}
- 混合
混合是把一份CSS拷贝到另一份CSS里面，并不是继承关系。
混合也分 不带参混合 和 带参混合。
不带参混合
定义的类如果不需要编译在CSS中，则需要在类名后加括号 ()。
.类名(){
CSS样式
}
//定义
.position(){
position: relative;
}
body{
//使用
.position();
}
定义的类如果需要编译在CSS中，则不需要在类名后加括号。
//定义
.position{
position: relative;
}
body{
//使用
.position;
}
带参混合
带参混合又分为带默认值和不带默认值，可以理解为类名也是变量名的作用域。
带参混合不带默认值：
.类名(@变量名){
//CSS样式
}
//定义
.border(@w){
border: @w solid #333;
}
body{
//使用
.border(1px);
}
带参混合带默认值：
.类名(@变量名:值){
//CSS样式
}
//定义
.border(@w:1px){
border: @w solid #333;
}
body{
//使用
.border(); 或 .border(5px);
}
- 匹配模式
匹配模式类似于JS里的if，但写法上有些偏差，写法和混合的带参不带默认值的写法很像。
.类名(匹配规则){
//CSS样式
}
//定义
.position(r){
position: relative;
}
.position(a){
position: absolute;
}
body{
//使用，匹配 r 的CSS类
.position(r);
}
- 运算
可以在数字类的值上使用加减乘除运算，可以不带单位
body{
color: #eee + 10
}
- 嵌套
可以在类里面嵌套着写CSS类，伪类选择器可以使用 &:伪类{}，&代表上一层选择器
body{
background: @background-color;
a{
color: #000;
&:hover{
color: red;
}
}
}
- @arguments 变量
当一个类名里面有多个变量的时候，可以使用 @arguments 把变量全部取出来。
.common-border( @w:1px; @c:#ccc; @s:solid ){
border: @arguments;
}
- 避免编译
当有一些属性值需要保留原样的时候可以使用避免编译,用 属性名: ~'CSS样式';。
.count(){
width: ~'calc(300px-30px)';
}
- !important
可以给样式加最高权重，也可以给混合的类名加。
.common-border( @w:1px; @c:#ccc; @s:solid ){
border: @arguments;
}
body{
.common-border()!important;
}
- 引入less或CSS文件 @import
@import "文件路径";
更多的语法规则可以在 less中文官网 学习。
