LESS用法·

CSS 彻底改变了 Web 页面的设计，但 CSS 仍然是静态的，而且在其句法发展方面受到限制。这些限制是有目的且合乎情理的，鼓励广泛加以实现。但开发人员和设计人员常常发现 CSS 使用起来很单调乏味。许多 Web 框架包含一些工具，这些工具使得人们更容易使用更灵活的特性创作 CSS，然后将结果编译成静态 CSS，以便部署到站点。最近的一些项目更侧重于创建旨在编译到 CSS 中的语言。Alexis Sellier 的开源项目 LESS 是这类语言中最受欢迎的一种语言。

LESS 在现有 CSS 语法之上添加了一些开发人员熟悉的特性，比如变量、mixins、运算符和函数。可以使浏览器中的 JavaScript 或通过服务器端 JavaScript 工具集的预处理将 LESS 编译到 CSS 中。LESS 在其他各种工具集中也得到了广泛应用，包括 JavaScript 的流行 Bootstrap 项目。在本文中，我要介绍的是 LESS，LESS 是为现代网站编写可读性的、可维护的 CSS 的一种方式。参见下载部分，获取本文的示例代码。

Less是一个开发管理CSS的强大工具，强大在哪里呢？她给CSS增加了设置变量（variables）、引用（mixins）、嵌套（nested）、运算（operations）的功能。下面用实际代码来演示Less的作用。首先新建一个文件：example.less，less格式文件的语法和css文件格式一样，只要你有css基础，你就能很快地掌握less。设置变量（variables）设置变量（variables）功能和JavaScript文件中设置变量的形式差不多，一次设置，就可以重复使用。在新建的example.less输入如下代码：

@brand_color: #4D926F;

#header {
color: @brand_color;
}

h2 {
color: @brand_color;
}

经过编译后就能产生一个example.css文件，其内容如下：

#header {
color: #4D926F;
}

h2 {
color: #4D926F;
}

引用（mixins）
引用（mixins）功能可以让一样式引用另一个样式中的所有css语句。下面给出less文件内容：

.rounded_corners {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}

#header {
.rounded_corners;
}

#footer {
.rounded_corners;
}

经过编译后产生的css文件内容如下：

.rounded_corners {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}

#header {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}

#footer {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}

嵌套（nested）

嵌套（nested）功能可以加强管理css样式的层级关系，让css样式之间的关系更加清晰明了。比如你想写一个class值为logo的元素样式，而这个元素的一个祖元素的ID值为header，你可能会这样写这个样式的名称：#header .logo。现在不必了，你可以直接把.logo样式写在#header样式里，如下：

#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}

经过编译后产生的css文件内容如下：

#header { color: black; }
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}

运算（operations）

运算（operations）功能可以让你对css中的长宽值、颜色值等数值进行加减乘除运算，如有下less文件内容：

@the-border: 1px;
@base-color: #111;

#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}

#footer {
color: @base-color + #111;
}

经过编译后就能产生的css文件内容如下：

#header {
color: #333;
border-left: 1px;
border-right: 2px;
}

#footer {
color: #222;
}

巴特西

LESS用法·

最新文章

热门文章