6.3 Less和mixin 6.3.1 Less简介

发表于 更新于 分类于 ， ， Waline： 本文字数： 1.7k 阅读时长 ≈ 2 分钟

6.3 Less和mixin

Bootstrap并不是直接提供CSS源文件,CSS源文件是通过编译Less源码而来的。Less是一种CSS预处理语言,支持变量、mixin、函数等功能。如果掌握了Less的用法,Bootstrap用户将可以直接使用Less源码,从而使用Bootstrap框架中包含的大量变量、mixin。

6.3.1 Less简介

CSS作为一门功能强大的样式单语言,用于为HTML页面定义丰富多彩的样式,工作得一直非常好。虽然CSS号称是一门语言,但CSS并不具备编程语言的特征。

CSS缺陷

总体上,CSS存在着如下缺陷。

CSS无法定义变量

比如在页面上有很多地方都希望使用＃aaa 这个颜色,但在CSS样式单文件中只能一直重复地书写这个颜色。如果有一天希望对整个网页风格进行调整,希望将#aaa这个颜色改为＃ccc,开发者只能将原来所有出现＃aaa的地方手动修改为＃ccc,这一点非常不利于页面后期的升级和维护。

CSS无法执行计算

由于CSS本身不支持变量,自然也就谈不上计算了。但在实际开发中确实非常需要计算。比如我们要定义一个普通的高度为25px,另外2个高度要以此为基准。例如如下代码:

1
2
3
.a{height: 25px;}
.b{height: 20px;}
.c{height: 50px;}

如果有一天客户要求将普通的高度改为20px,另外两个高度也随之变化,但你看上面的代码能实现吗?当然不行,开发者必须手动修改另外两个变量,这真的令人沮丧。多希望有如下语法啊:

1
2
3
4
@normal-height 25px;
.a{height: @normal-height;}
.b{height: @normal-height -5px;}
.c{height: 2 * @normal-height;}

CSS不支持命名空间嵌套

CSS 经常要通过子元素选择器或包含选择器来实现命名空间嵌套。例如如下CSS样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#container.a
{
    width: 200px;
    height: 35px;
}
#container span
{
    font-size: 16px;
    text-decoration: none;
}
# container div li
{
    list-style: circle;
}

上面这个例子中所有样式都需要被id为container的元素包含才有效,编写该CSS样式文件时你可能还意识不到问题。但如果在编写之后页面结构发生了改变,那就需要为所有CSS样式添加包含元素,这就非常麻烦了。例如需要修改为如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.a
{
    width: 200px;
    height: 35px;
}
span
{
    font-size: 16px;
    text-decoration: none;
}
div li
{
    list-style: circle;
}

假如有几十个类似的CSS样式定义,突然要将它们全部放在id为container的元素内才有效,此时可能就需要在每个CSS选择器之前都增加container,这也是非常痛苦的事情。

Less用来干什么

由于CSS存在一些固有的缺陷,因此开发者为CSS重新开发了”预处理语言”—Less。这种语言通常可以支持变量、计算、命名空间嵌套甚至流程控制等功能。

使用Less编译得到最终的CSS

开发者使用这种”CSS预处理语言”来编写源代码,然后使用特定的编译器对源代码进行处理,从而得到最终的CSS文件—请记住:CSS 预处理语言完全可以支持变量、计算、命名空间嵌套甚至流程控制,因此CSS预处理语言可以很好地弥补CSS的缺陷。
Less是一种诞生于2009年的CSS预处理语言,Less增加了变量、运算符、mixin、函数等功能,让CSS更易维护。Less既可在浏览器上运行(通过JS库实时编译),也可借助Node.js或Rhino在服务器端运算。