标签：
1 什么是less
LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性,less 编译工具koala.exe
2 less语法
less中有很多的语法规则，但个人觉得less中比较常用的也是最重要的就下面几个：
变量、混合规则（mixin）、模式匹配、嵌套，& 指代上一层的选择器
不常用的：arguments 避免编译 ！important
1. 先来看下变量的简单用法，less中有变量运算，(参与运算任何一个参数带有单位即可)
//less 重点 //变量 //mixin 混合 //模式匹配 //嵌套规则 @test-width:100px; @test-size:12px; .wrap{ color: red; width:(@test-width*3); font-size: @test-size*12; height: @test-width+12; }
编译产出物，就是css啦
.wrap { color: red; width: 300px; font-size: 144px; height: 112px; }
2. 混合规则（mixin）,相当于定义一个类，在别的类中直接包含进来，看下具体情况吧
@test-width:100px; @test-size:12px; .wrap{ color: red; width:(@test-width*3); font-size: @test-size*12; height: @test-width+12; /*下面是mixin进来的default-border的样式*/ .default-border; } .default-border{ border: solid 1px red; box-shadow: 0px 0px; }
对应的css编译结果为==>
.default-borde会出现在css中，如果是定义成
.default-border(@varName){...}这个不会出现在产出物css中，定义的产出物只会出现在mixin中,看下面的代码-2
.wrap { color: red; width: 300px; font-size: 144px; height: 112px; /*下面是mixin进来的default-border的样式*/ border: solid 1px red; -webkit-box-shadow: 0px 0px; box-shadow: 0px 0px; } .default-border { border: solid 1px red; -webkit-box-shadow: 0px 0px; box-shadow: 0px 0px; }
代码2-
1 .border01(@b1){ 2 border: solid @b1*10 red; 3 } 4 5 .width-1(@w1:100px;){ 6 font-size:@w1; 7 border-radius: @w1 - 14; 8 } 9 10 .test{ 11 .border01(3); 12 .width-1(); 13 }
产出物代码2-
1 .test { 2 border: solid 30 #ff0000; 3 font-size: 100px; 4 border-radius: 86px; 5 }
3.模式匹配
预先定义一系列的类，这些都会有不同的参数，不同的参数其内部的样式是不同的，mixin的时候根据传入的参数不同而自动匹配到不同的类
例如：四个不同方向的箭头
1 //direction bottom: 2 .tg(bottom){ 3 border-width: @test-width - 70; 4 border-color: red transparent transparent transparent ; 5 border-style: solid dashed dashed dashed ; 6 } 7 //direction right: 8 .tg(right){ 9 border-width: @test-width - 70; 10 border-color: transparent transparent transparent red ; 11 border-style: dashed dashed dashed solid; 12 } 13 //direction left: 14 .tg(left){ 15 border-width: @test-width - 70; 16 border-color: transparent red transparent transparent ; 17 border-style: dashed solid dashed dashed ; 18 } 19 //不管匹配到哪一个，这个一定会匹配到的，@_必须这种写法，所有的参数必须保持一致 20 .tg(@_){ 21 width: 0; 22 height: 0; 23 overflow: hidden; 24 } 25 26 .sj{ 27 .tg(bottom); 28 }
对应产出物==> 所有.tg不出出现在css中,只有.sj会出现在css中
1 .sj {
//这就是想下的箭头 2 border-width: 30px; 3 border-color: red transparent transparent transparent ; 4 border-style: solid dashed dashed dashed ; 5 width: 0; 6 height: 0; 7 overflow: hidden; 8 }
3.嵌套规则和 &
1 .list{ 2 margin: 0; 3 padding: 0; 4 list-style:none; 5 li{ 6 width: 100px; 7 height: 50px; 8 } 9 a{ 10 float: left; 11 border:solid 1px red; 12 //&代表他的上一层选择器符号 13 &:hover{ 14 background: red; 15 } 16 } 17 }
产出物==>
1 .list { 2 margin: 0; 3 padding: 0; 4 list-style: none; 5 } 6 .list li { 7 width: 100px; 8 height: 50px; 9 } 10 .list a { 11 float: left; 12 border: solid 1px red; 13 } 14 .list a:hover { 15 background: red; 16 }
4. 其他不重要的
arguments
.t-arguments(@style:solid,@width:1px,@color:#ffddff){ border: @arguments; } .test-arguments{ .t-arguments(dashed,5px); }
output==>
.test-arguments {
border: dashed 5px #ffddff;
}
避免编译
1 /*koala 会吧210px-20px编译，这不是我们想要的，calc是css3的属性，应交给浏览器编译*/ 2 .t-comile{ 3 width:calc(210px-20px); 4 } 5 /*避免编译*/ 6 .t-cancel-compile{ 7 width: ~‘calc(210px-20px)‘; 8 }
output==>
1 /*koala 会吧210px-20px编译，这不是我们想要的，calc是css3的属性，应交给浏览器编译*/ 2 .t-comile { 3 width: calc(190px); 4 } 5 /*避免编译*/ 6 .t-cancel-compile { 7 width: calc(210px-20px); 8 }
!important,会把所有的mixin进来的所有的属性都后缀加上！important
.t-important(@width:200px,@height:200px){ width: @width; height: @height; } .test-important{ .t-important() !important; }
output==>
.test-important { width: 200px !important; height: 200px !important; }
标签：
原文地址：http://www.cnblogs.com/knightshibiao/p/4227504.html
