less(less is more, Than css)
标签(空格分隔): 实习笔记
可以加入变量和运算。
less有多种编译环境,桌面的编译工具:koala编译。node.js库编译。浏览器编译。把less文件编译成css。
less注释
在less中,有两种注释,
/**/和//,前者在编译时会被保留,后者不被编译
变量
在less里定义变量,用@符号定义,然后就可以用变量了
如 @test:300px; .box{ width:@test; height:@test; background-color:#CCC; }
混合
写 css 遇到可以重用的东西,重用样式,在less里的处理方法如下
@test:300px; .box{ width:@test; height:@test; background-color:#CCC; .border; } .box2{ .box; margin-left:100x; } //带参数的混合的运用 .test_hunhe{ .border_02(30px); } //带默认值的参数,默认为10,但是有特殊的时候可以在border_03(这里带值) .test_hunhe_03{ border_03(); } .border{ border:solid 5px pink; } //带参数的混合 border_02(@border_width){ border:solid #CCC @border_width; } //混合,带默认参数 .border_03(@border_width:10px){ border:solid green @border_width; } //混合例子 .border_radius(@radius:5px){ -webkit-border-radius:@radius; } .radius_test{ width:100px; height:40px; background-color:green; .border_radius(); } //不希望使用默认值 .radius_test2{ width:100px; height:40px; background-color:green; .border_radius(10px); }
匹配模式
相当于 js 中的 if,但不完全是,满足条件才能匹配
//用 css 画三角 .sanjiao{ width:0; height:0; overflow:hidden; border-width:10px; border-color:red transparent red transparent; border-style:solid; } //匹配模式 .triangle(top,@w:5px;@c:#CC){ border-width:@w; border-color:transparent transparent @c transparent ; border-style:dashed dashed solid dashed; } .triangle(right,@w:5px;@c:#CC){ border-width:@w; border-color:transparent transparent transparent @c; border-style:dashed dashed dashed solid; } .triangle(bottom,@w:5px;@c:#CC){ border-width:@w; border-color: @c transparent transparent transparent ; border-style: solid dashed dashed dashed; } .triangle(left,@w:5px;@c:#CC){ border-width:@w; border-color:transparent @c transparent transparent ; border-style:dashed solid dashed dashed; } //无论匹配谁都必须带上的,比如选了.triangle(top);可以这样写 .triangle(@_,@w:5px;@c:#CCC){ width:0px; height:0px; overflow:hidden; } .sanjiao{ .triangle(top); } //匹配模式的定位 .pos(r){ position:relative; } .pos(a){ position:absolute; } .pos(f){ position:fixed; } .pipei{ width:200px; height:200px; background-color:green; pos(a);
运算
less中是可以有运算的
@test_01:300px; .box_02{ width:test_01+20*5; }
嵌套规则
当我们写列表性的东西时,可以这样写。但是要尽量少去匹配元素。
.list{ width:600px; margin:0; padding:0; list-style:none; li{ height:30px; line-height:30px; background-color:pink; margin-bootom:5px; a{ float:left; //代表他的上一层选择器 &:hover{ color:red; } } } }
@srguments变量
.border_arg(@w:30px,@c:red,@xx:solid){ border:@arguments } //arguments用例 .test_arguments{ .border_arg(); }
避免编译
有的时候我们会写一些 less 不认识的文字,如滤镜,所以需要避免编译。imporent
//避免编译 test_03{ width:~'calc(300px-30px)'; } //important .test_important{ border_radius()!important; }