css预处理器
CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行CSS的编码工作。
为什么要使用CSS预处理器
CSS仅仅是一个标记语言,不可以自定义变量,不可以引用。
CSS有具体以下几个缺点:
1,语法不够强大,比如无法嵌套书写,导致模块化开发中需要书写很多重复的选择器;
2,没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护。
使用预处理器的优点:
1,提供CSS层缺失的样式层复用机制
2,减少冗余代码
3,提高样式代码的可维护性
Less
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。一个合法的CSS代码段本身也是一段合法的LESS代码段。
Less 提供了变量、嵌套、混合、操作符、函数等一般编程所需的抽象机制。
变量
变量允许我们在一个地方定义一系列通用的值,然后在整个样式表中调用。
在做全局样式调整的时候,可能只需要修改几行代码就可以了。
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
复制代码
编译为:
#header {
width: 10px;
height: 20px;
}
复制代码
混合(Mixins)
混合(Mixin)是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方法。假设我们定义了一个类(class)如下:
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
复制代码
如果希望在其它规则集中使用这些属性,只需像下面这样输入所需属性的类(class)名称即可
#menu a {
color: #111;
.bordered();
}
.post a {
color: red;
.bordered();
}
复制代码
嵌套(Nesting)
Less 提供了使用嵌套(nesting)代替层叠或与层叠结合使用的能力。假设我们有以下 CSS 代码:
#header {
color: black;
}
#header .navigation {
font-size: 12