less
1 使用 @ 定义变量 2 变量可以做运算 3 4 @color : #000; 5 @width : 1000px; 6 7 使用 & 表示当前类 8 .box{ 9 &:hover{ 10 color : #000; 11 } 12 } 13 14 css 可以嵌套 15 16 ul{ 17 display : block; 18 li{ 19 float : left; 20 a{ 21 font-size : 18px; 22 } 23 } 24 } 25 26 继承 ： 直接在需要的地方引用 class或者 id 类 27 28 .clearfix{ 29 zoom : 1; 30 display : block; 31 &:after{ 32 content: ""; 33 visibility: hidden; 34 clear: both; 35 height: 0; 36 display: block; 37 } 38 } 39 40 .radius(@radius : 15px){ 41 border-radius: @radius; 42 } 43 44 .box{ 45 .clearfix; 46 .radius(10px); 47 } 48 49 混合 ： 类似 js 中的函数, [或者叫继承] 50 .layout(){ 51 ... 52 } 53 54 55 作用域 ： 限制继承的条件，可以继承一个 类的部分内容 56 57 延伸 ： &:extend(.box); 括号中可以填写多个 类名 编译后的效果就是 css 中的分组 58 59 60 when 用来做条件判断 61 62 when not 不等于 63 64 /* 65 使用 isnumber 来判断某个参数是否为 数字 66 * */ 67 68 .border(@width : 1px , @style : solid, @color : #d1d1d1) when (isnumber(@width)){ 69 border: @width @style @color; 70 } 71 72 /* 73 使用 iscolor 来判断某个参数是否为 颜色 74 * */ 75 76 .border(@color) when (iscolor(@color)){ 77 78 .border(1px , solid , @color); 79 } 80 81 82 .border(@solid) when not ( iscolor(@solid)) , ( isnumber(@solid) ){ 83 .border(1px , @solid); 84 }
使用 @ 定义变量变量可以做运算@color : #000;@width : 1000px;使用 & 表示当前类.box{&:hover{color : #000;}}
css 可以嵌套
ul{display : block;li{float : left;a{font-size : 18px;}}}
继承 ： 直接在需要的地方引用 class或者 id 类
.clearfix{zoom : 1;display : block;&:after{content: ""; visibility: hidden; clear: both; height: 0; display: block;}}
.radius(@radius : 15px){border-radius: @radius;}
.box{.clearfix;.radius(10px);}
混合 ： 类似 js 中的函数, [或者叫继承].layout(){...}
作用域 ： 限制继承的条件，可以继承一个 类的部分内容
延伸 ： &:extend(.box); 括号中可以填写多个 类名 编译后的效果就是 css 中的分组
when 用来做条件判断
when not 不等于
/* 使用 isnumber 来判断某个参数是否为 数字 * */
.border(@width : 1px , @style : solid, @color : #d1d1d1) when (isnumber(@width)){ border: @width @style @color;}
/* 使用 iscolor 来判断某个参数是否为 颜色 * */
.border(@color) when (iscolor(@color)){ .border(1px , solid , @color);}
.border(@solid) when not ( iscolor(@solid)) , ( isnumber(@solid) ){ .border(1px , @solid);}
