David Walsh 关于使用 Sass 重构的见解

David 最近重新设计了他的博客，并邀请了一系列嘉宾为他的网站撰写文章。我们决定以交叉的方式进行：他为 CSS-Tricks 撰写一篇文章，而我则为 David Walsh 博客撰写一篇文章。他在重构中使用了 Sass，以下是他关于这种体验的文章。我使用它已经快一年了，所以 我在他网站上的文章也是关于这种体验的。

创建一个不使用 CSS 预处理器的网站似乎是一个糟糕的决定。即使只是为了快速修改一些颜色或元素尺寸，或者仅仅是为了轻松地合并和压缩 CSS 文件，CSS 预处理器也变得越来越重要。为了最近对 David Walsh 博客 进行的重构，我决定现在是深入研究 CSS 预处理器的时候了。以下是我关于这种体验的一些想法，希望您能从中获得一些提示。

决定使用 Sass

关于是否使用像 Sass 或 LESS 这样的工具，并没有多少需要决定的问题，更多的问题是应该使用哪一个。最后，我选择了 Sass，因为

• 我使用 LESS 的体验... 并不那么令人满意；这个工具似乎... 维护得不太好
• 像 Compass 这样的工具，一个包含更新器的混合集合，非常宝贵
• extend() API 看起来很棒
• 将媒体查询样式嵌入到选择器中可以提高组织性
• 雪碧生成是一个巨大的省时工具
• Chris Coyier 告诉我应该这么做！

当您编写像 David Walsh 博客或 CSS-Tricks 这样的博客时，学习一个新的 CSS 工具也提供了撰写另一个有用主题的绝佳机会。在这个项目中使用 Sass 显然是最佳选择。

有用的代码片段

以下是我在网站上经常使用的一些 Sass 代码片段

供应商前缀

@mixin vendorize($property, $value) {
	-webkit-#{$property}: $value;
	-moz-#{$property}: $value;
	-ms-#{$property}: $value;
	-o-#{$property}: $value;
	#{$property}: $value;
}

浮动清除

@mixin clear() {
    &:before, &:after {
        content: "\0020";
        display: block;
        height: 0;
        overflow: hidden;
    }
    &:after {
        clear: both;
    }
}

屏幕外文本

@mixin linkTextOffscreen() {
    text-indent: -9999px;
    overflow: hidden;
    text-decoration: none;
    display: block;
    font-size: 0;
    text-align: start;
}

:hover、:active、:focus 样式

@mixin hoverActiveFocus($property, $value) {
    &:hover, &:active, &:focus {
        #{$property}: $value;
    }
}

我在代码中大量使用了这些混合。我的一些代码片段模拟了 Compass 提供的功能，但我喜欢看到混合提供的具体样式。

错误，错误

就像第一次使用任何工具一样，我犯了不少错误。不过，犯错是件好事——您可以从中吸取教训，并写下来，这样其他人就不会再犯同样的错误了。我犯的错误包括

• 嵌套 == 膨胀：迄今为止，我在 Sass 中犯的最大错误是在不需要嵌套的情况下嵌套了样式。在发布时，我的主要 CSS 文件是一个令人作呕的 59k！我仍在努力缩减样式的大小，现在网站已经发布，这是一项更加困难的任务，因为...
• ...特异性冲突：由于我在不需要的情况下嵌套样式的问题，我遇到了很多特异性冲突，导致我的 CSS 文件膨胀得更厉害。当涉及到屏幕尺寸媒体查询 CSS 时，我需要将所有内容标记为 !important。由于不正确地使用 SASS 选择器嵌套，这导致了大量的 CSS 膨胀和麻烦。
• 雪碧生成... 太迟了：我选择 SASS 的一大原因是我知道 SASS 会管理雪碧生成。多么省时啊，对吧？嗯，只有在你一开始就知道如何格式化它们的情况下才如此。我的问题是我创建了带有普通 background-image 声明的 CSS，没有注意 SASS 的期望格式。当我创建雪碧后才发现正确的格式，然后就说“WTF FML”。最后，我创建了自己的雪碧，因为我一开始没有正确编写 SASS。非常令人懊恼的错误。
• 复制 Compass 提供的助手：我无需提及它们... 我非常确定我复制了 Compass 提供的功能。如果我不更新代码，并注意浏览器功能，我以后可能会为此付出代价。

提示和最后印象

我想给大家留下一些关于如何开始使用 SASS 的提示，并分享一些关于 Sass 开发的最后印象

• 尽管我复制了 Sass 提供的功能，并且遇到了嵌套问题，但 Sass 仍然是一个很棒的工具，它与 Compass 结合，提供了可用的最佳工具+更新环境。
• 在嵌套选择器时，问问自己这样做是否真的必要。当然，嵌套也有助于更好地组织代码，但膨胀的样式表会让所有用户都感到痛苦。
• 为 CSS 动画属性创建变量，尤其是持续时间和延迟。一致的动画时间可以确保令人赏心悦目的 UI 效果。
• 为块填充创建变量，并使用简单的公式（$blockPadding/2）来计算较小的块。这可以确保一致的元素间距。
• 您可以在选择器中嵌套媒体查询，但我更喜欢为移动/媒体查询特定的样式创建一个单独的文件；这样可以让我一目了然地看到所有移动样式。我的打印样式也是如此。
• 我使用 这些说明 将 Sass 语法高亮添加到 Sublime Text 2 中。
• 在您编写代码时，跟踪您的 CSS 文件大小，并定期审查您的嵌套策略，以避免样式膨胀。
• 尽可能地使用 CSS 动画——它们可以为您节省很多将来 JavaScript 代码。

最后，我对决定使用 Sass 作为我的 CSS 预处理器的决定感到非常满意。文档很有帮助，您可以在几分钟内上手使用，而 Compass 在很多方面都是一个宝贵的工具。我使用 Sass 的唯一问题都是我自己造成的，下次就可以轻松避免了。在您的下一个网站或重构项目中尝试一下 Sass——它非常有用，并且会在整个项目中发挥作用。