less

2018-06-24 00:25:34来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

 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);}

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS清除浮动

下一篇:【CSS】过渡、动画和变换