【译】利用.LESS来提高CSS
勾长卿
简介
Cascading Style Sheets,或简称为CSS,是用于描述Web页面外观的语言。利用CSS，Web开发人员可以将文档的内容（html,文本，或者图片等等)和页面的表现相分离.这种分离会让页面更加容易阅读，理解和更新。浏览器通过将CSS文件进行缓存使页面所占用的宽带大幅减少。CSS还可以使网站的改版更加容易。能展示CSS无与伦比灵活性的例子是CSS 禅意花园。这个网站只有一个固定HTML的页面，但是允许全世界的开发人员提交他们自己的CSS页面来让网站变得与众不同。
不幸的是，现有的CSS语法还有待提高，因为CSS中没有变量一说，许多css文件包含大量重复的css规则，这使得CSS文件不仅比应有的要大，还使阅读更加困难。如果一个网站仅仅是将主色调改了，则所有的CSS修饰符都需要被重复的修改。并且CSS特有的继承性也会导致问题，比如让<h1>中的元素具有下划线，但h1内的元素没有下划线，则还需要多定义一个选择符，比如h1 a.在理想情况下CSS应该支持嵌套定义，让你可以在H1选择符内直接定义a.
.LESS是一个免费开源的,从Ruby的LESS library衍生而来。.LESS是一个允许web开发人员使用更加先进的语言特性的语法解析器，这些特性包括变量，操作符，嵌套规则。其实.LESS真正的作用是将使用高级特性的CSS转换成标准的CSS.这些都是在Web客户端发起请求时通过Http Handler来完成的。也可以是编辑时就完成的。此外，.less可以配置成自动最小化所生成的CSS文件，不仅节省了带宽，并且使最终用户体验更上一层。
这篇文章讲述如果在你的Asp.net网站中开始使用.LESS。请继续往下读。
解决CSS的不足：变量
CSS的一个缺陷是css文件中经常包含N多重复的CSS规则。比如说，很多网站都在不同的CSS规则中使用相同的颜色信息，页面的背景色和页面头部背景色或者页脚背景色或许都使用了相同颜色。下面的CSS代码段说明了当应用上面规则时，CSS文件存在着重复：
#header {
background-color: #ffe;
}
#footer {
background-color: #ffe;
}
a:hover {
background-color: #ffe;
}
如果网站需要将主色调改变，则需要改变所有使用#ffe颜色的地方。
.LESS引入了变量来解决这样的问题。就像C#和VB带啊一样。变量允许通过变量名来引用相应的值，如果你需要改变值，比如说上面的#ffe，你仅仅只是需要改变变量值皆可。下面代码是使用这一特性的CSS：
@primary_color: #ffe;
#header {
background-color: @primary_color;
}
#footer {
background-color: @primary_color;
}
a:hover {
background-color: @primary_color;
}
解决CSS的不足：对变量使用操作符
.LESS甚至可以对变量应用操作符，比如你需要将页面头部的边框颜色比背景颜色略微深一点，你可以这样使用：
@primary_color: #ffe;
#header {
background-color: @primary_color;
border-bottom-color: @primary_color - #222;
}
当.LESS的分析器遇到上面操作符时，它会将@primary_color的值减去十六进制的值#222,结果会是颜色#ddc。
解决CSS的不足：混合器
使用多个CSS class来包含经常使用的css规则的一小部分并不是少见的。.LESS支持混合器，它允许在一个class中定义一部分规则并在其他的class中包含这部分规则。这很像变量，只是这是应用在class上的。看下面的CSS代码段，注意body和#submenu有两个相同的属性，他们的margin和padding属性都设置成0.
body {
font-family: Verdana;
padding: 0;
margin: 0;
}
#submenu {
background-color: #ffe;
padding: 0;
margin: 0;
}
而使用混合气，你可以将重复定义的属性移到一个单独的class呢（我命名为noMarginNoPadding）然后在body和#submenu直接饮用这个class:
.noMarginNoPadding { padding: 0;
margin: 0;
}
body {
font-family: Verdana;
.noMarginNoPadding
}
#submenu {
background-color: #ffe;
.noMarginNoPadding
}
解决CSS的不足：嵌套规则
很多情况下，样式表对于一个大块内的内容需要定义很多选择符，比如，一个web设计人员需要为页面头部所有h1元素定义规则，或者是为所有ul内的li元素使用特定的class名称，如果需要实现这些，CSS需要制定很多的选择符，需要写一大堆的选择符并用空格分开。
.LESS使用一种更加直观的方式，下面CSS代码段是web设计人员常见的任务，为ol内的li元素指定横向排列。这种样式需要为ul定义规则，为ul内的li定义规则还需要为li内的a（超链接）之类的元素定义规则,.LESS允许使用嵌套定义来让CSS更加容易阅读和理解。并且使其分组。
ul
{
list-style-type: none;
height: 30px;
li
{
float: left;
padding-right: 15px;
a
{
padding: 5px;
display: block;
color: black;
text-decoration: none;
}
a:hover
{
background-color: @menu_color - #222;
}
}
}
使用.LESS的HTTP Handler解析CSS
上面.LESS支持的多种特性--变量，操作符，混合器，嵌套规则，并不是标准CSS所能够识别的。如果你创建一个样式表并使用变量，然后发送到客户端，服务端并不会理解变量，也就不会进行处理。而.LESS的作用是将其支持特性的CSS处理成合法有效的CSS。将.LESS的CSS转换成标准的CSS是在客户端向服务端发起请求时进行的。让我们来看.LESS是如果凭空生成CSS的。
为了你的站点可以使用.LESS,你需要dotless.Core.dll集合到你的bin目录下，写这篇文章时你可以下载到目前最新的.LESS（版本1.0.0.5）,如果想要更新的版本，请去.LESS website.
下一步，打开Web.config来注册.LESS的HTTP Handler.至少要添加如下<httpHandlers>节点到<System.Web>下（如果站点是跑在IIS7integrated pipeline模式下，则还需要添加到<system.webServer>\<handlers>节点）
<httpHandlers>
...
<add type="dotless.Core.LessCssHttpHandler, dotless.Core" validate="false" path="*.LESS" verb="*" /> </httpHandlers>
上面的代码告诉ASP.net将所有以.LESS扩展名结尾的文件都交由LessCssHttpHandler这个HTTP Handler来处理，这个HTTP Handler将CSS解析成标准的CSS并放入一个特定的文件中，然后返回给请求者。
这就是所有内容了！不过要记住将你所有的css文件都改成.LESS作为扩展名。现在你可以享受.LESS所带来的好处了。
可以在文章底部找到下载使用.LESS的ASP.net示例站点的链接。如果想查看生成后的CSS代码，请看如下DEMO中的Styles.less的代码段：
@base_color: #f63;
.noMarginNoPadding {
margin: 0;
padding: 0;
}
body {
background-color: @base_color;
.noMarginNoPadding;
}
上面代码展示了使用变量（@base_color）和混合器(noMarginNoPadding类)，styles.less文件通过<head>中的 <link>节点进行引用，就像你引用普通的css文件一样。当浏览器请求文件时，.LESS HTTP Handler会将上面的CSS代码段转换成下面的代码段，并返回到浏览器，注意@base_color的值是如何被替换的，以及noMarinNoPadding类是如何应用到body选择符中：
.noMarginNoPadding {
margin: 0;
padding: 0;
}
body {
background-color: #f63;
margin: 0;
padding: 0;
}
缓存和压缩
你可以通过在web.config中配置.LESS以支持缓存和压缩（详细请看.LESS homepage或者在本篇文章底部的示例代码。）cache选项通过将HTTP Handler生成的标准CSS通过ASP.net中的Cache对象缓存在服务端，而压缩CSS时用过删除空格以及其他不需要的标签来减少CSS的大小，比如，前面的CSS代码开启压缩后如下：
.noMarginNoPadding{margin:0;padding:0;}body{background-color:#f63;margin:0;padding:0;}
记住，这里的缓存是将CSS缓存到服务器中。无论是否使用服务端缓存，.LESS HTTP Handler会含有将生成的CSS文件缓存在浏览器5分钟的HTTP头。
使用.LESS的编译器手动生成标准CSS文件
连同HTTP Handler一起，.LESS的下载文件中海包含了.LESS引擎的扩展，名为：dotless.Compiler.exe，这个程序用于在命令行下将.LESS CSS生成标准的CSS文件,带有压缩CSS选项，比如，生成开启压缩选项后，将Styles.less生成Styles.css可以使用如下命令：
dotless.Compiler.exe -m Styles.less Styles.css
使用.LESS编译器的好处是生成静态的css文件，你既不用依靠.Less的客户端也不用依靠.LESS的服务端缓存。此外，你也不需要为此设置Web.config或者是IIS,你只需要处理标准的css文件即可。当然，剑是双刃的，你需要手动来生成CSS文件，然而，如果你有自动生成或者是部署的程序，你仅仅只需要添加几行命令而已。
总结
CSS是一种理想设置WEB页面的方式，虽然CSS非常强大，但是它本身固有的缺陷也会使样式文件由于重复而过于庞大。.LESS通过引入一些列特性来解决CSS的不足，这些特性包括：变量，操作符，混合器，嵌套规则。这些.LESS的特性既可以通过HTTP Handler来处理，也可以通过命令行来编译。此外，.LESS还可以通过配置来自动压缩生成CSS的大小。
Happy Programming!
By Scott Mitchell
translated by CareySon
本文转自CareySon博客园博客，原文链接http://www.cnblogs.com/CareySon/archive/2010/03/06/1679793.html，如需转载请自行联系原作者
类似资料：