即使您不是设计师，也想让您的网站看起来美观吗？试试设计框架。

我记得很久以前，我就知道如何使用铅笔。我可以用它写字，甚至可以用它画画——虽然就我而言，说我会画画有点夸张。我可能知道如何使用铅笔并彻底了解它的技术，但这种技术知识并不意味着我能画出美观的东西。

我之所以提到这一点，是因为当我使用 CSS 时，我总是想到我糟糕的绘画能力。我理解这项技术，并且已经使用了很多年。我可以轻松地使用和修改样式表，以及使用复杂的选择器。然而，我自己创建的任何 Web 应用程序看起来都很丑陋。尽管我掌握了 CSS 的所有技术知识，但我通常无法做出更好看、更令人愉悦的设计。

幸运的是，对于像我这样的人来说，出现了一种新型框架来帮助解决此类问题。正如 Ruby on Rails 和 Django 等服务器端框架使创建 Web 应用程序变得容易，而 Backbone.js 和 Knockout.js 等客户端框架使创建浏览器内应用程序变得容易一样，设计框架使装饰和设计您的应用程序变得容易。

现在，当我第一次听说设计框架（有时称为 CSS 框架）时，我想知道它们怎么可能有所帮助。毕竟，我已经了解 CSS 了；它们能贡献什么呢？答案是：非常多。通过采用设计框架，您将获得许多 CSS 类和 ID，这些类和 ID 使布局页面变得非常容易。通过选择正确的类，即使您像我一样缺乏图形设计技能，也可以使网站看起来非常合理。使用设计框架意味着，即使您没有任何设计技能，也可以使网站看起来相当令人愉悦。如果您确实具有设计技能，则该框架将使您能够事半功倍。

在本文中，我将介绍一些主要的 CSS 设计框架，并引出最新且最有趣的一个：Twitter 的 Bootstrap。在我的下一篇文章中，我将更仔细地研究 Bootstrap，以及它为何风靡全球。

Blueprint（蓝图）

我所知道的第一个设计框架是（并且仍然是）Blueprint（蓝图）。Blueprint（蓝图）背后的想法非常简单。您下载并引用 Blueprint（蓝图）的三个 CSS 文件：一个用于屏幕，一个用于打印，另一个包含 Internet Explorer 的特殊定义

<link rel="stylesheet" href="css/blueprint/screen.css" 
 ↪type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" 
 ↪type="text/css" media="print">
<!--[if lt IE 8]>
   <link rel="stylesheet" href="css/blueprint/ie.css" 
 ↪type="text/css" media="screen, projection">
<![endif]-->`

通过包含这些样式表，Blueprint（蓝图）会重置用户浏览器的 CSS 值，删除可能在其他地方设置的任何默认边距、内边距和边框。

Blueprint（蓝图）还重置了排版（typography）的默认值，确保您的标题和段落标签看起来更好、更一致，而不是每个浏览器定义的默认值。同样，即使您不付出任何额外的努力，Blueprint（蓝图）也能确保您的排版更符合既定的设计原则。正如 Blueprint（蓝图）网站所说，这些原则早于 Web，并且在我们的电子时代仍然适用。

然而，Blueprint（蓝图）的真正魔力在于其布局。Blueprint（蓝图）提供“网格布局（grid layout）”，实际上这意味着它为您提供 CSS 类，让您指示特定元素应有多宽，从跨越一列到跨越 24 列。您是否想并排显示两个 div，左侧的 div 占据三分之二的空间？没问题——只需将它们定义如下

<div class="container">
    <div class="span-16">This is the left-hand div</div>
    <div class="span-8 last">This is the right-hand div</div>
</div>

通过使用这些 CSS 类，div 将自动占据用户屏幕上的适当空间。此外，由于内容位于名为“container”的 div 内，因此屏幕（和 div）的宽度将根据用户浏览器窗口的宽度自动调整。

在 Blueprint（蓝图）出现之前，Web 设计师会自己完成所有这些工作，为每个站点专门实施和重新实施此类柱状布局。Blueprint（蓝图）的 24 列网格的优势在于，您在页面布局方面拥有极大的灵活性，允许每个元素跨越您认为合适的列数。只要 span-* 类加起来为 24，并且每行中的最后一个元素都具有“last”类，布局就会看起来相当不错。这在各个方面都比许多人为确保特定布局所做的事情（即使用表格）要好得多。表格很棒，但不适合布局页面。我无法告诉您我见过多少次表格三重嵌套在其他表格中，只是为了使布局能够正常工作。

Blueprint（蓝图）的另一个优点是，它已经在各种浏览器上尝试和测试了这些 CSS 定义。您不再需要担心在 Chrome、Firefox、IE 和 Safari 上是否可以正常工作，因为 Blueprint（蓝图）已经为您解决了这个问题。特殊的仅 IE CSS 文件确保 Internet Explorer 也能正常工作，即使您的用户运行的是旧版本。

当然，由于 Blueprint（蓝图）是一堆 CSS 文件，您可以随时更改它以适应您的需求。实际上，Blueprint（蓝图）的大量（广泛的）文档描述了您如何不仅可以自定义布局，还可以自定义 CSS 本身。

对 Blueprint（蓝图）的最大批评是，它的类名违反了 CSS 的精神。当然，您可以拥有名为“span-5”和“span-10”的类，以指示您希望文本跨越 24 列布局中的五列或十列。但是，CSS 不是应该让您摆脱这种计算，让您更多地从语义名称的角度考虑吗？我的回答是，是的，这是一个很好的观点，但是 Blueprint（蓝图）的布局非常有用且易于理解，因此关注 CSS 设计师的最初意图是没有帮助的。

Sass、SCSS 和 Compass

Blueprint（蓝图）的另一个问题并非 Blueprint（蓝图）本身固有的，而是与其所基于的技术有关。CSS 是一种非常巧妙的技术标准，但事实证明，人们很难学习和理解它，许多设计师也很难使用它。诚然，有些人能够使用 CSS 制作出漂亮、巧妙的设计，我无意以任何方式贬低他们的能力。但是，CSS 有许多缺陷，其中许多缺陷在我几年前发现 Sass 之前从未考虑过。

Sass（Syntactically Awesome Stylesheets）是一种 CSS 预处理器（CSS preprocessor）。也就是说，它是一种文件格式，您可以对其进行编译，编译的输出是一个 CSS 文件。Sass 比直接使用 CSS 具有许多优势，首先是您可以设置变量。当您创建一个应该具有一致配色方案的网站时，这是一件非常棒的事情。您可以在一个地方设置颜色，然后在许多不同的地方使用它们。

Sass 还允许您嵌套 CSS 定义，这样，如果您有多个元素共享定义，您就不必再在不同的地方重复这些相似之处，而是可以利用类似于编程语言中的变量作用域的东西。嵌套还意味着复杂的选择器变得更容易编写和阅读，因为它们将路径分解为易于理解的部分。

Sass 还提供了一种函数或宏定义类型，称为“mixin”，允许您保持 CSS 的 DRY（“不要重复自己”）。这意味着您可以在一个地方定义一个 CSS 规则，然后在多个其他地方包含它。

现在，Sass 已经存在多年了，并且在此期间运行良好。它最初由开发人员 Hampton Catlin（他也开发了 Haml 模板格式）编写，但后来由 Nathan Weizenbaum 和 Chris Eppstein 接管。最初的 Sass 语法在某些方面类似于 Python，因为删除了尾随分号，并且缩进是语法的强制部分。也就是说，您的声明的缩进，甚至是您的 mixin 的定义的缩进，都是强制缩进，并且缩进级别反映了您的定义将在其中生效的作用域。例如，以下是 Sass 中的一组简单定义，取自 sass-lang.com 主页

table.hl
  margin: 2em 0
  td.ln
    text-align: right

li
  font:
    family: serif
    weight: bold
    size: 1.2em

然后，您可以在 Sass 文件上运行 Sass 编译器，生成可由 Web 浏览器解释的 CSS 文件。

这种语法仍然存在，如果您喜欢它，Sass 很乐意与您合作。但是，首选语法现在称为 SCSS，它是现有 CSS 语法的超集。我的印象是，语法的改变部分原因是 CSS 和 Sass 之间的差异对于许多人来说太大了，并且强制缩进给许多用户带来了问题。因此，上面显示的 Sass 可以用 SCSS 表示如下

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

如您所见，该语法与标准 CSS 的语法非常相似，使人们更容易从 CSS 过渡。

整个 Sass 框架，包括两种语法，主要在 Ruby 中实现，并在 Ruby 语言 Web 开发人员中广泛使用。但是，您不需要使用 Ruby 作为您的 Web 开发语言。许多人使用此系统，将 Sass/SCSS 编译为 CSS，而不知道或不在乎他们是否正在使用 Ruby。也就是说，Ruby on Rails 框架已将 SCSS 采用为其基础设施的标准部分，因此任何使用 Rails 的人都可能了解并使用它。

Compass（罗盘）

Sass 和 SCSS 都不是设计框架；它们是样式表语言，旨在简化您的 CSS 开发。但是 Sass 的作者创建了 Compass（罗盘）设计框架（他们称之为“CSS 创作框架”），它预定义了大量类和 mixin，供您在自己的项目中使用。因此，如果您想拥有圆角或标准化字体或一组调色板，Compass（罗盘）将使您轻松实现。

此外，Compass（罗盘）还带有 Blueprint（蓝图）兼容模式。这意味着，如果您的网站已经与 Blueprint（蓝图）一起工作，您可以（大部分情况下）只需将 Blueprint（蓝图）CSS 文件替换为 Compass（罗盘）CSS 文件，就完成了。

Compass（罗盘）既巧妙又强大，我对我所看到的以及它的工作方式印象深刻。然而，我对它的文档水平感到失望，尤其是在与 Blueprint（蓝图）兼容性有关的问题上。是的，我最终找到了我想要的所有答案，并且电子邮件列表特别活跃且乐于助人。但我很惊讶我不得不回头查看 Blueprint（蓝图）文档，才能理解 Compass（罗盘）兼容模式正在做什么，而不是能够直接访问文档。

所有这些都不能掩盖 Compass（罗盘）提供的强大功能及其为用户提供的灵活性。如果您有兴趣使用 Compass（罗盘），而不仅仅是 Sass/SCSS，那么我在“资源”部分中提到的任何一本书都可能很有用，因为它们详细描述了 Compass（罗盘）框架。

LESS

LESS 是另一种样式表语言，它在许多方面与 Sass 框架的 SCSS 语法非常相似。实际上，我的印象是 SCSS 和 LESS 相互学习和影响，尽管我不清楚是谁影响了谁，以及在什么时间。最重要的是，如果您对 SCSS 感到满意，您可能会对 LESS 感到满意，反之亦然。语法上存在一些差异，但它们非常细微。

LESS 和 Sass 之间的一个区别是，LESS 文件可以通过多种不同的方式编译。可以使用编译器（最初用 Ruby 编写，但目前用 JavaScript 编写）在开发人员的计算机上将它们转换为 CSS，可以在部署过程之前或期间进行。但是，由于实现是在 JavaScript 中，因此还有另一种选择。您可以按原样将 LESS 样式表下载到您的浏览器中，然后使用 JavaScript 库将其动态转换为 CSS。例如

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

出于性能原因，最好预先将 LESS 文件编译为 CSS。但是，当编译器不可用、您想动态生成样式表以及在开发期间，这非常有用。

您为什么要选择 LESS 而不是 SCSS，反之亦然？老实说，我无法给出一个令人信服的理由来选择其中一个而不是另一个。它们非常相似，并且与普通的 CSS 相比具有如此多的优势，以至于您选择哪一个都无关紧要，只要您选择其中一个即可。在 Bootstrap 出现之前，我本会将赌注押在 SCSS 成为事实上的标准上，但 Bootstrap 可能为 LESS 带来了新的生命力，甚至可能帮助它超越 SCSS。

结论

鉴于 LESS 和 SCSS 之间的相似性，我对基于 LESS 的框架的出现并不感到惊讶。但是，创建的框架（Bootstrap，由 Twitter 的两位工程师编写，并在 Apache 许可证下发布）已被证明在开发人员和设计师中都非常受欢迎。Bootstrap 不仅包括 Blueprint（蓝图）的网格，还包括大量其他便利性和样式，使您可以轻松拥有美观的导航栏、表格、表单，甚至用于动态客户端应用程序的小部件。Bootstrap 甚至能够根据屏幕尺寸修改菜单的大小和形状，使其成为适用于移动设备和台式计算机的“响应式”框架。

有些人甚至开始厌倦 Twitter Bootstrap，因为它变得如此流行，并且可以轻松创建看起来像许多其他 Bootstrap 网站的设计。但是对于像我这样只想建立一个简单的网站并使其看起来相对美观的人来说，我发现 Bootstrap 非常有帮助。

在我的下一篇文章中，我将实际研究 Bootstrap——它提供了什么，如何安装和使用它，甚至如何将其与 Ruby on Rails 一起使用，后者（正如我上面提到的）支持 SCSS 而不是 LESS。无论您使用这些系统和框架中的哪一个，我都强烈建议您尝试它们并将它们融入到您自己的工作中。经验丰富的设计师大概知道如何集成这些技术，而缺乏设计能力的程序员将欢迎有机会自己创建一个美观的网站。

资源

如果您对 CSS 感兴趣，那么阅读有关该主题的资料可能会很有用。W3C 的标准位于 http://www.w3.org/Style/CSS。您可能还会对 Ben Henick 撰写、O'Reilly 出版的HTML & CSS: The Good Parts 感兴趣，该书试图引导读者了解有用且适当的技术。另一本关于 CSS 主题的优秀的 O'Reilly 书籍是 Christopher Schmitt 的 CSS Cookbook（第 3 版）。

Blueprint（蓝图）自 2011 年 5 月以来未更新，但它仍然有效且文档齐全。您可以阅读有关它的信息并从 http://blueprintcss.org 下载它。

Sass/SCSS 的文档位于 https://sass-lang.cn。该网站包含许多关于人们想要做的常见事情的指南。Compass（罗盘），建立在 Sass/SCSS 之上的框架，位于 http://compass-style.org。请注意，许多关于 Compass（罗盘）的在线教程和截屏视频都使用了旧的 Sass 语法，因此，如果您只知道新语法，可能会有点难以理解。

关于 Sass 和 Compass（罗盘）的两本书是 Wynn Netherland、Nathan Weizenbaum 和 Christopher Eppstein 合著的 Sass and Compass in Action，由 Manning 出版；以及 Sass 创建者 Hampton Catlin 撰写的 Pragmatic Guide to Sass，由 Pragmatic Programmers 出版。

最后，如果您有兴趣比较 Sass 和 LESS 的细微之处，可以在 https://gist.github.com/674726 找到一个不错的图表和介绍。

Cube 照片，来自 Shutterstock.com。