less 初见

一、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{
... ...
}