less的用法
1.注释：less的注释有两种
一种是: /* 会被编译的 */
另一种是: //不会被编译的
会不会被编译是指这个注释的文字会不会显示在该less文件所对应的CSS文件上
2.变量
@test_width:300px;
.box{
width:@test_width;
height:@test_width;
}
声明变量：一定要用@开头 @变量名：值;
3.混合
.box{
width:300px;
hight:300px;
.border; //混合下面的border
}
.border{
border:solid 5px pink;
}
.box2{
.box;
margin-left:100px;
}
4.混合--带参数
.border_02(@border_width){
border:solid yellow @border_width;
}
.test_hunhe{
.border_02(30px);
}
5.混合--默认带值
.border_03(@border_width:10px){
border:solid yellow @border_width;
}
.test_hunhe_03{
.border_03();
}
主意：如果混合有默认值，使用时可以不用传参。如果没有默认值，则必须传参。
有默认值时，如需要改变值，则传递需要传入的数值，其余未传入的值则使用默认值。
6.匹配模式
.sanjiao{ //向上三角形的画法
width:0;
height:0;
overflow:hidden;
border-width:10px;
border-color: transparent transparent red transparent
border-style: dashed dashed solid dashed ;
}
.triangle(top,@w:5px,@c:#ccc){ //向上的三角
border-width:@w;
border-color: transparent transparent @c transparent;
border-style: dashed dashed solid dashed ;
}
.triangle(bottom,@w:5px,@c:#ccc){//向下的三角
border-width:@w;
border-color: @c transparent transparent transparent;
border-style: solid dashed dashed dashed ;
}
.triangle(left,@w:5px,@c:#ccc){//向左的三角
border-width:@w;
border-color: transparent @c transparent transparent;
border-style: dashed solid dashed dashed ;
}
.triangle(right,@w:5px,@c:#ccc){//向右的三角
border-width:@w;
border-color: transparent transparent transparent @c ;
border-style: dashed dashed dashed solid ;
}
triangle(@_,@w:5px,@c:#ccc){ //如下代码不管能否匹配到数值，都会显示出来
width:0;
height:0;
overflow:hidden;
}
sanjiaoxing{ //画三角形，传值进入进行匹配
.triangle(top,100px);
}
7.匹配模式--定位例子.pos(r){
position:relative;
}
.pos(a){
position:absolute;
}
.pos(f){
position:fixed;
}
.pipei{ width:200px; height:200px; background-color:green; .pos(f); }8.运算
@test_01:300px;
.box_02{
width: (@test_01 - 20) * 2; //运算过后得到的值为：width:560px;
color: #ccc-10; //变成了c2c2c2，颜色也是可以进行运算的，只是比较少运动到
}
9.嵌套规则
--最有意思的小东西了
--两种用法
*& 对尾类使用
- hover 或 focus
*对连接的使用
- &-item
list{
li{
height:30px;
wight:30px;
}
a{
float:left;
//& 代表他的上一层选择器
&:hover{
color:red;
}
}
span{
float:right;
}
}
把 a 和 span嵌套到list里面。
10. @arguments变量
*@arguments包含了所有传递进来的参数。
.border_arg(@w:30px,@c:red,@xx:solid){
border:@arguments;
}
.test_arguments{
.border_arg(40px);
}
所对应的CSS文件显示的是：
.test_arguments{
border:40px,red,solid;
}
11.避免编译*有时候我们需要输出一些不正确的CSS语法或者使用一些less不认识的专有语法。
*要输出这样的值我们可以在字符串前加上一个 ~
列如：width：~‘calc(100%-35)’
less文件中：
.test_03{
width:~'calc(300px-30px)'
}
css中：
.test_03{
width:calc(300px-30px);
}
12.！important以及总结
! important关键字
-会为所以混合所带来的样式，添加上！important
