Less
Less (Leaner Style Sheets 的缩写) 是一门向后兼容的 CSS 扩展语言。也可以叫它css预处理语言;Less 和 CSS 非常像,因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展,这就是 Less 如此易学的原因之一。
来了解一下less的功能。
变量
定义变量:
@width: 10px;
@color:#f00;
使用:
div a{
font-size:@width;
color:@color;
}
编译为:
div a{
font-size:10px;
color:#f00;
}
混合
混合(Mixin)是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方法。假设我们定义了一个类(class)如下:
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
如果我们希望在其它规则集中使用这些属性呢?没问题,我们只需像下面这样输入所需属性的类(class)名称即可,如下所示:
#main a {
color: #111;
.bordered();
}
.head a {
color: red;
.bordered();
}
.bordered
类所包含的属性就将同时出现在 #main a
和 .he