初识less

时间：2015-07-19 17:43:40 阅读：130 评论：0 收藏：0 [点我收藏+]

标签：

LESS 高级特性

LESS 四大特性：变量、混合、嵌套、函数。

LESS 还拥有一些很有趣的特性有助于我们的开发，例如模式匹配、条件表达式、命名空间和作用域，以及 JavaScript 赋值等等。

混合实例：

.button { 
 border-radius: 6px; 
 -moz-border-radius: 6px; 
 -webkit-border-radius: 6px; 
} 
.button2 { 
 border-radius: 3px; 
 -moz-border-radius: 3px; 
 -webkit-border-radius: 3px; 
}
这样我们可以通过传入参数的值，以及传入不同的参数个数能够选择不同的混入及改变它的最终代码。在 LESS 中定义参数是可以用常量的！模式匹配时匹配的方式也会发生相应的变化：
变量实例：
.mixin (dark, @color) { 
 color: darken(@color, 10%); 
} 
.mixin (light, @color) { 
 color: lighten(@color, 10%); 
} 
.mixin (@zzz, @color) { 
 display: block; 
 weight: @zzz; 
} 
 
.header{ 
   .mixin(dark, red); 
} 
.footer{ 
   .mixin(light, blue); 
} 
.body{ 
   .mixin(none, blue); 
当我们定义的是变量参数时，因为 LESS 中对变量并没有类型的概念，所以它只会根据参数的个数来选择相应的混入来替换。而定义常量参数就不同了，这时候不仅参数的个数要对应的上，而且常量参数的值和调用时的值也要一样才会匹配的上。
函数实例：
.header { 
 color: #cc0000; 
 display: block; 
 weight: dark; 
} 
.footer { 
 color: #3333ff; 
 display: block; 
 weight: light; 
} 
.body { 
 display: block; 
 weight: none; 
}
这样在我们的less中就可以使用.less来调用其中的混合常量和变量。。。
使用伪类时使用&符号表示其作用域，例如：
.body {
　& :hover{background-color: black; }
 display: block;
 weight: none;
}
这就使body拥有了伪类的效果！

初识less

标签：

原文地址：http://www.cnblogs.com/rengpiaomiao/p/4658839.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行