CSS 编程：LESS 助您事半功倍

在本文中我将介绍使用 LESS Framework 动态生成 CSS 内容的 Web 开发

毫无疑问CSS 代表一大飞跃它有望将内容与网页显示完全分离而且在很大程度上实现了这一点尽管 CSS 属于（或应该属于?）设计人员关注的范畴它率先提出了关注点分离原则几乎每个开发人员都对此非常敏感因此CSS 很快获得采用它在 Web 开发过程中如此根深蒂固以致于有时难于满足最新网站的需求

问题并不是 CSS 不足以满足样式最新图形丰富并且外观吸引人的网站需求而是纯粹的声明语言并非始终适合表现复杂的互联样式声明好在只要编写正确CSS 对于浏览器仍然合理但对人来说也是如此吗？

Web 开发中一个相对较新的方向是围绕 CSS 构建基础结构使开发人员和设计人员能够以可持续性更高的方式生成相同的 CSS最终的浏览器样式表并无变化但其生成方式应有所不同更易读也更容易管理

这一 Web 开发领域出现于几年前现在日渐成熟有几个可用的框架可以帮助您进行动态 CSS 内容生成我将提供其中一个框架也就是 LESS Framework 的执行概要并演示它如何与 ASPNET MVC 解决方案集成

为何采用 LESS？

开发人员借助 LESS 解决的最大问题之一是信息的重复作为软件开发人员您可能了解切勿重复(DRY) 原则并且每天都在应用DRY 的主要优点在于它减少了相同信息的存储位置因而减少了应更新该信息的位置的数量

对于普通 CSS您根本不会遇到 DRY 问题例如在某些其他情况下如果多个类中使用某种颜色而您需要对其进行更改可能除了逐一更新之外没有更好的办法了使用 CSS 类可以定义特定元素的外观并针对样式相关的元素以相同的方式跨页面重复使用尽管 CSS 类确实可以减少重复但有时在其他方面显得不足

CSS 类的一个问题是它们在语义 HTML 元素的级别运行在构建各种 CSS 类时经常需要重复颜色或宽度等细节信息对这些可重复细节中的每一个使用同一个类并不方便即使设法用一个 CSS 类表示几乎所有可重复样式如颜色和宽度当开始对语义元素（如容器）应用样式时还是应该连用多个 CSS 类以便实现所需的效果

如果您曾用 Bootstrap 等框架设计过网页就会明白我的意思例如

<a class=btn btnprimary />

首先将锚点设置为一个按钮（类 btn）然后设置为特定风格的按钮（类 btnprimary）这种方法有效但可能需要进行大量工作提前计划所需的类这会增加 Web 项目的工作量而项目往往时间紧迫

LESS 这样的动态样式表语言表示一种横向思维您不必花时间尝试使普通 CSS 变得更加智能只需使用不同的工具（一般是语言）进行生成即可因此LESS 是一种框架它向 CSS 编码添加了编程人员友好的概念如变量块和函数

与动态 CSS 生成严格相关的是将其处理为普通 CSS 供浏览器使用的问题客户端可以通过临时 JavaScript 代码处理 LESS 代码也可以在服务器上对其进行预处理使浏览器只接收最终的 CSS

在 ASPNET MVC 中设置 LESS

我将演示从 ASPNET MVC 应用程序中使用 LESS 所需的操作首先我将重点介绍 LESS 代码的客户端处理在布局文件的 HEAD 部分添加以下内容

<link rel=stylesheet/less type=text/css href=@UrlContent(~/content/less/mysiteless) /> <script type=text/javascript src=@UrlContent(~/content/scripts/lessminjs)></script>

这里假设您已在项目中创建了 Content/Less 文件夹以包含所有 LESS 文件您需要一个 JavaScript 文件以便在浏览器中进行实际的 LESS 到 CSS 处理您可以从 获取该脚本文件我将回顾一些可证明 LESS 有用的场景

运行中的 LESS变量

观察 CSS 渐变是了解 LESS 变量作用的好方法多年以来设计人员使用小的 GIF 文件绘制 HTML 容器的渐变背景最近浏览器增加了 CSS 渐变支持这也是官方 CSS 标准的一部分通过线性渐变语法及其变体实现很遗憾如果要确保尽量多的浏览器采用这种渐变必须借助一些东西如图 中的代码

图 中的代码几乎不可读更糟的是在需要渐变的任何地方都必须重复使用这些代码此外如果要稍微更改一下渐变颜色（或只更改饱和度或淡化效果）唯一的办法是在所有位置进行手动编辑直截了当地说这非常困难但是这是对于普通 CSS 唯一可行的方法

图 在多种浏览器中显示渐变的综合代码

/* Old browsers fallback */backgroundcolor: #ff; background: url(images/red_gradientpng); backgroundrepeat: repeatx; /* Browser specific syntax */background: mozlineargradient( left #fceabb % #fccdd % #fb % #fbdf %); background: Webkitlineargradient( left #fceabb % #fccdd %#fb %#fbdf %); background: olineargradient( left #fceabb % #fccdd %#fb %#fbdf %); background: mslineargradient( left #fceabb % #fccdd %#fb %#fbdf %); /* Standard syntax */background: lineargradient( to right #fceabb % #fccdd %#fb %#fbdf %);

为找到更好的解决方案您需要跳出 CSS试试 LESS 在 LESS 中您只需定义一次渐变 CSS然后在适当的位置按名称引用即可 例如

backgroundgradientorange { background: #fceabb;
}
&ntainer { backgroundgradientorange; }

名为 backgroundgradientorange 的类按名称在适当的位置嵌入到类容器和任意其他类中 而渐变定义保存在一个位置

从开发人员的角度来看这并不是什么革命性的改变 不过它使用了变量功能这是 CSS 中没有的 事实上如果将文件保存为普通样式表并引用的话前面的语法并不可行 需要一些代码将扩展语法转换为普通 CSS 这正是 LESS JavaScript 分析器的功能它将变量扩展为其实际 CSS 内容

变量还适用于颜色或大小等标量值 请考虑以下 LESS 代码

@black: #;
#main { color: @black; }
header { backgroundcolor: @black; }

分析器将 @black 变量扩展为分配的值并进行全文件替换 最终效果是在一处更改实际颜色整个文件中的相应内容会自动更改
运行中的 LESSImports

如果需要您可以将 LESS 代码拆分到多个文件引用文件和包含的类中 例如假设您创建一个 gradientsless 文件内容如下

backgroundgradientorange { background: #fceabb;
}

在另一个 LESS 文件中如 mainless您可以通过导入该文件引用任何渐变

@import "gradients";
&ntainer { backgroundgradientorange; }

如果 gradientsless（扩展名不是严格必需的）位于其他文件夹中则应在调用中指示路径信息以便导入
LESS Mixin

我调用该 LESS 项目进行变量渐变 严格来说这并不完全正确 在 LESS 中一个变量包含一个单一值 一个 CSS 类容器被称为一个 mixin 这类似于函数但不包含任何自定义逻辑 就像函数一样LESS 可以接受和处理参数 请看看图 中演示 mixin 的代码

在图 中一个名为 shadow 的 mixin 定义了框阴影样式并将颜色作为外部参数公开 与之类似textbox mixin 定义输入字段的基本外观 它导入阴影定义并保持宽度为参数化形式 通过这种方式为不同大小（mininormal 和 large）的输入字段定义三个类就非常简单了 更重要的是它只需进行少量编辑工作更新也非常简单（请参阅图 ）

图 LESS Framework 中的 Mixin

/* Mixins */
shadow(@color) {
boxshadow: px px px @color;
}
textbox(@width) {
shadow(#);
border: solid px #;
backgroundcolor: #dddd;
padding: px;
width: @width;
}
/* CSS classes */
textboxmini {
textbox(px);
}
textboxnormal {
textbox(px);
}
textboxlarge {
textbox(px);
}

图 运行中的 LESS Mixin

Mixin 可以接受多个参数或可变数量的参数此外每个参数都支持默认值

mixin(@color: #ff) {
}

LESS 并不是富编程语言表示它的设计缺少命令来指示条件或循环 但 mixin 的行为仍然可以根据所传递的值发生变化 假设您要对一个较大的按钮使用较粗的边框和字体 您定义一个名为 button 的参数化 mixin使用关键字when将设置与条件绑定 条件必须基于一个参数

button (@size) when (@size < px) {
padding: px;
fontsize: em;
width: @size *;
}
button (@size) when (@size >= px) {
padding: px;
fontsize: em;
fontweight: ;
backgroundcolor: red;
width: @size *;
}

您应用不同的设置但也可以使用基本操作通过一个系数将大小扩大为数倍 然后在实际 CSS 类中使用 mixin

pushbuttonlarge {
button(px);
}
pushbuttonsmall {
button(px);
}

运行此代码的结果如图 所示

图 在 CSS 类中使用 LESS Mixin 的效果

LESS 附带很多可操作颜色的预定义函数您可以使用函数按百分比调整颜色亮度和饱和度也可以按百分比设置颜色淡入和淡出如下所示

pushbutton {
backgroundcolor: fade(red %);
}

有关 LESS 支持的函数的完整文档请参阅
嵌套类

我个人觉得需要重复 CSS 块指示同级样式非常讨厌 下面是一个典型示例

#container h {
}
#container p {
}
#container p a {
}
#container img {
}

在编写得很好的普通 CSS 中实际上可以避免很多重复但使用平面列表布局样式的方式并不是最好的 在这种情况下最好使用一些层次结构 在 LESS 中可以像这样嵌套样式规则

&ntainer {
h {
fontsize: em;
color: fade(# %);
a {
color: #;
&:hover {color: red;}
}
}
}

经过处理后前面的 LESS 代码会产生下面的样式

&ntainer h
&ntainer h a
&ntainer ha:hover

服务器端处理

您可以原样下载 LESS 代码在客户端通过 JavaScript 代码对其进行处理 也可以在服务器上进行预处理然后将它作为普通 CSS 下载到客户端 在前一种情况下完全像使用普通 CSS 文件一样服务器端更改在下一次页面刷新时应用到客户端

如果您注重性能处理的是大型复杂 CSS 文件则服务器端预处理可能是更好的选择 服务器端预处理发生在您每次修改服务器上的 CSS 时 您可以在生成过程结束时手动完成额外的步骤 使用 LESS 编译器从命令行将 LESS 代码预处理为 CSS 此编译器是为服务器端工作安装的 less NuGet 软件包的一部分

不过在 ASPNET MVC 中可以将 LESS Framework 与捆绑机制集成有关捆绑机制请参阅我在 年 月的专栏CSS 编程捆绑和缩小(msd/magazine/dn) 这确保只要请求 LESS 文件就会执行 LESS 到 CSS 的转换 还确保通过 IfModifiedSince 标头正确管理缓存 最后您可以将分析和缩小混合起来 要在 ASPNET MVC 中集成 LESS首先需要下载并安装 less NuGet 软件包 然后将以下代码添加到 BundleConfig 类

var lessBundle =
new Bundle("~/myless")IncludeDirectory("~/content/less" "*less");
lessBundleTransformsAdd(new LessTransform());
lessBundleTransformsAdd(new CssMinify());
bundlesAdd(lessBundle);

捆绑将打包在指定文件夹中找到的所有 less 文件 LessTransform 类负责 LESS 到 CSS 的转换 该类使用 less API 分析 LESS 脚本 LessTransform 的代码非常简单

public class LessTransform : IBundleTransform
{
public void Process(BundleContext context BundleResponse response)
{
responseContent = dotlessCoreLessParse(responseContent);
responseContentType = "text/css";
}
}

更多智能工具

LESS 不是唯一的 CSS 预处理器 例如 Syntactically Awesome Stylesheets (Sass) 就是另一种常见的工具 () 实际上无论使用什么工具CSS 预处理器都是广泛的 Web 编程需要考虑的工具 无论是图形设计人员还是开发人员都需要更多智能工具来管理和组织 CSS 代码 最好同时将它们集成到 Web 平台 最后请注意Visual Studio 和 Visual Studio 通过 Web Essentials 扩展提供出色的 LESS（及相关技术）支持Web Essentials 扩展可从 下载 此外还可以从 Visual Studio Update 和即将发布的 Visual Studio 中获得 LESS 编辑器