一、less is what?
Less是一个CSS预处理语言,扩充了CSS,在静态的CSS基础上增加了一部分动态的内容:如 变量,运算符,混合(Mixin),...,Less是完全支持和兼容CSS的
二、语法
1、Less是完全支持CSS语法
2、Less中即支持单行注释,也支持多行注释
但只有多行注释能被编译到css中。
单行:// 单行注释
多行:/* 多行注释的内容 */
3、Less 支持 变量(Variable)
变量:在 Less中表示的是一个可以变化的数据,并且可以被多个地方所进行引用的一个数据
语法:
@变量名:值;
变量名:
由英文,数字,_,-组成
不能以数字开头
ex:
1、@color:#e4393c;
2、@border-width:3px;
3、@font-base:"微软雅黑";
4、@border:1px solid #000;
4、在Less中,允许出现运算符
+,-,*,/
5px * 2 = 10px
@border-width:3px;
.box{
border-width:@border * 0.3 ;
}
5、Less中支持 在一组样式中 混入(Mixin) 另一组样式
选择器1{ ... }
选择器2{
... ...
选择器1;
... ...
}
最终:选择器2中的样式 会包含 选择器1中定义好的样式
混入(Mixin)支持带参数的混入
在声明选择器的时候,允许使用"参数"来表示暂时不确定的数据,在最终混入的时候,将确定的数据传递进来
语法:
选择器(@参数名){
padding:@参数名;
}
引用带参数的选择器
#main{
选择器(2px);
}
定义带多个参数的选择器
选择器(@参1,@参2,@参3){
border:@参1 @参2 @参3;
}
6、 在 less 中,允许出现 选择器的嵌套
在 less 中,允许在一个选择器中 再声明 另一个选择器,从而实现 子代 或 后代 选择器的效果
选择器1{
... ...
... ...
选择器2{
... ...
... ...
}
>选择器3{
... ...
... ...
}
}
最终生成效果:
选择器1{
... ...
... ...
}
选择器1 选择器2{
... ...
... ...
}
选择器1>选择器3{
... ...
}