介绍 Scut，一个新的 Sass 实用程序库

以下是 David Clark 的客座文章。我认为 David 的新 Sass 库“Scut”非常有趣。它就像一个设计实用程序库，不同于设计模式库，因为它不强制执行任何特定的结构或特定的视觉设计。我一直发现这类东西很有吸引力，主要是因为我从未能够以一种让我感觉良好的方式实现它。我总是过度倾向于视觉设计，或者过于抽象，以至于它并没有那么实用。我认为 David 这次可能走在了正确的道路上。我会让他详细解释。

我启动了一个开源 Sass 实用程序库，其使命非常简单：简化和改进我们对常见样式代码模式的实现。我称之为 Scut。

Scut 是 Sass 混合宏、占位符、函数和变量的集合，这些变量足够通用，可以在任何项目、任何设计中广泛重用，并且易于集成到各种工作流程和编码约定中。每个 Scut 实用程序都致力于减少重复、提高组织性，并鼓励样式代码的重用和共享。

Scut 不是一个前端框架，也不提供默认样式：它不关心按钮上的渐变、框的填充、标题的字体大小或皮肤的颜色。它也不会提供供应商前缀：Scut 的独特重点使其有别于其他预处理器库。它应该可以帮助您构建网站——特别是如果您像我一样，处理很多网站，而不是单个大型应用程序——但它并不能做到一切。它是其他流行工具和实践的补充，而不是替代品。

我写这篇文章是为了解释我启动 Scut 的动机、意图和方法，最重要的是，是为了寻求您的协作输入。

因此，在您阅读时，请记住 Scut 仍处于起步阶段，而您，亲爱的读者，有能力改变和改进它，无论是通过添加和升级实用程序，还是通过阐明其背后的原则。如果您在任何时候决定准备好试用或提出一些想法，请访问 Scut 的文档 或 Github 上的代码库。

我们现在如何共享样式代码，以及为什么 Scut 有用武之地

可重用组件：在此插入漂亮按钮

考虑 Bootstrap、Foundation、PureCSS 等——无论我们称之为前端框架、UI 工具包、设计系统还是其他任何名称，其目的都很明确：帮助开发人员快速轻松地从预制组件构建功能强大、美观、可靠的界面。

即使我们不经常使用这些框架，我们也应该认识到它们的价值并向其学习。最重要的是，它们展示了系统化网站设计方法的优点。Mark Otto 呼吁“构建自己的 Bootstrap”，以及 Brad Frost 对“原子设计” 的描述提醒我们，如果我们不想采用别人的可重用组件，我们应该构建自己的零部件，使其同样系统化、同样可重用。Mailchimp 的模式库 和 Mapbox 的 Base 是这种方法的大规模示例。

这种样式代码共享和重用——组件集合、设计系统——已经引起了很多关注，这是一件好事。但是它不是唯一的种类；我写下这一切是为了说 Scut 不同。

一个好的前端框架在很多方面对我们有所帮助，但其在不同项目和设计中的可重用范围是有限的。Scut 旨在实现更广泛、更基本的重用——不是重用经过打磨的组件，而是重用构成这些组件的抽象、通用模式和实践。（至少，那些在原生 CSS 中不清晰且简单的模式和实践。）

抽象、通用模式和实践：“未完成”样式

另一种共享和重用样式代码的方法——Scut 的方法——涉及传输有用的操作、巧妙的技巧和最佳实践，但不是完整的组件。

基本思想是：创建和共享尽可能通用、灵活、裸露的模块，以便它们可以在任何项目中用于实现有用的模式，而无需要求或确定其特定的环境。

这种共享以两种方式进行：教程和实用程序库。

教程

对于教程的范例，我推荐您参考这个博客，CSS-Tricks，在这里，著名的 Chris Coyier 解释并举例说明了我们都可以在自己的工作中应用的模式。然后还有其他博客、书籍、文章、Stack Overflow 答案、各种资源——在这个互联网上，教程比我们想象的还要多。

编写、阅读和共享教程是一种不可或缺的做法，尤其优秀，因为教程在共享的同时也在教授。但是，它们提供了我们可以复制的实践，而不是我们可以重用的工具：它们传播的是知识，而不是实用程序。

实用程序

可重用通用实用程序，Scut 的理想组成部分，是教程的一种扩展。事实证明，我们阅读或撰写的大多数（如果不是全部）样式技巧、提示和最佳实践都可以抽象成可重用的实用程序。

为了更好地理解我所说的“实用程序”，可以考虑 Underscore（JavaScript“实用程序工具带”）的众多功能，当然还有它的后代 Lodash（对于本文，请假设“Underscore”=“Underscore 或 Lodash，无论您喜欢哪个”）。让我解释一下：我一直在阅读 Eloquent Javascript，作者 Marijn Haverbeke，前几天我遇到了一种常见的有用模式，称为“reduce”或“fold”函数。按照教程的传统，Haverbeke 解释了“reduce”函数的作用，并向我展示了如何创建一个。所以我可以编写自己的——我们都可以编写自己的……但 Underscore已经拥有 一个我们可以使用的“reduce”函数——并且由于 Underscore 的函数已经经历了开源的考验，所以它会比我可能自己编写的任何东西都好（尽管我不能代表你，你拥有所有的智慧）。尽管我从获得的知识中受益匪浅，但我经常通过将这些知识与开源实用程序结合起来而获得更多益处。

在样式代码的世界中，协作创建类似实用程序集合的最佳方法是使用预处理器库。（预处理器工具相对于类集合的两个主要优势是（1）它们内置了可变性，以及（2）只有当它们实际使用时，它们才会影响最终样式表，即提供给客户端的内容。）所以：Scut 闪亮登场。

让我们将上面的 JavaScript“reduce”示例与一些样式代码进行对比。在 CSS-Tricks 上，有一篇非常有用的文章，““在未知中居中””，关于如何居中尺寸不确定的元素。最棘手的是垂直居中。阅读完这篇文章后，我知道了在父元素上设置display: table;并在要居中的子元素上设置display: table-cell; vertical-align: middle;的方法。这太棒了：这是一个值得学习的宝贵技巧。但我们不要止步于此。为了扩展该教程并创建一个可重用、可共享的实用程序，我可以编写一个 Sass 混合宏——类似于这样

@mixin vertically-center ($child: ".vcentered") {
  display: table;
  & > #{$child} {
    display: table-cell;
    vertical-align: middle;
  }
}

将此混合宏应用于父元素；将要居中的子元素的选择器作为参数传递（或为该子元素提供默认类vcentered）；您就实现了垂直居中——并且通过创建可以重用和共享的工具来实现。

从本质上讲，我们使用 CSS（通过 Sass）做的事情与 Underscore 使用 JavaScript 做的事情相同。将这些实用程序组合在一起，并将其公开给开源社区，您最终应该会得到一个有用的库。

（顺便说一句，Scut 提供了 三种不同的垂直居中方法，每种方法都适合不同的上下文。）

我将在下面进一步解释 Scut 实用程序的方法论；但首先，您可能想知道……

现有的预处理器库怎么样？

如果你经常阅读 CSS-Tricks，你可能听说过 Compass 和 Bourbon。还有其他的 Sass 库，LESS 和 Stylus 也各自发展出了自己的库。这些库已经存在，并拥有强大的社区支持，并且运行良好；它们确实提供了“抽象的、通用的模式和实践”——那么为什么还要再创建一个呢？因为，据我所见，**现有的预处理器库过于关注供应商前缀和旧版浏览器支持，而没有提供很多可重用的样式模式**。（有一些，是的，但不多。）尽管它们很有价值，但它们也像世间万物一样，存在局限性。

当我开始使用 Autoprefixer 时，它们的局限性就显现出来了。（如果你还没有这样做，我建议你阅读 Andrey Sitnik 在 CSS-Tricks 上的客座文章。）我曾尝试过 Compass，并定期使用 Bourbon；但是由于我的供应商前缀由 Autoprefixer 处理，Compass 和 Bourbon 似乎不再那么有用了。它们提供了一些我偶尔会调用的辅助工具，但不是经常使用。

我开始思考预处理器库还能用来做什么。这引发了 Scut 背后的想法——一个忽略供应商前缀，专注于抽象样式模式的预处理器库。

Scut 的原则和目的

Scut 工具解决了哪些问题？

Scut 工具应该体现 CSS 预处理器的关键优势。我将列出我最喜欢的几个。

CSS 预处理器的关键优势——也是 Scut 工具的关键优势

• 它帮助我**避免重复**。与其在不同地方键入相同的代码，我使用 mixin、extend、函数或变量，我的代码变得更容易编写；更准确——不易出错和意外变化；并且更容易更改和维护——因为每个重要部分都只存在于一个地方。
• 它帮助我**组织代码**，通过将相关的规则分组到命名的模式中——因此，与其是一系列杂乱无章的规则以各种方式影响组件的外观，我可以看到哪些规则与哪些特定效果相关。
• 它帮助我**重用代码**（如上所述）。

此外，**Scut 工具实现的模式应该存在一个或多个以下问题——当然，工具应该解决该问题：**

1. 模式不直观

所需的 CSS 规则无法自解释。其中涉及某种技巧：你必须经过专门的培训才能解读代码。此外，由于存在技巧，因此模式难以记住。除非你已经执行过该操作一百次，否则你可能需要查找某个博客上的说明；即使这样，你也需要思考、实验和调整才能再次正确执行。

举例说明：你可能希望创建一个具有固定纵横比（例如 16/9）的流体尺寸元素。经过一些搜索，你找到了一种有效的方法——但你可能无法仅通过查看 CSS 就能理解其原因。

.parent-element {
  overflow: hidden;
  position: relative;
}
.parent-element:before {
  content: "";
  display: block;
  height: 0; /* Huh? */
  padding-top: 56.25%; /* Wha? */
}
.parent-element > .child-element {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; /* Filling a container with zero height? */
}

相反，使用 Scut mixin，只需扫一眼你的代码就能理解其含义。

.parent-element {
  @include scut-ratio-box(16/9, ".child-element");
}

mixin 组织并命名模式——当然，如果你在其他地方需要不同的比例框，它还可以避免你重复复杂的代码。

再举一个例子，考虑著名的 CSS 三角形。如果没有一些解释，所需的样式代码是不清楚的。要创建一个高度和宽度均为 50px 的蓝色右向三角形。

.triangle-right {
  width: 0; 
  height: 0; /* A shape with no dimensions? */
  border-top: 25px solid transparent; /* Why 25px here? */
  border-bottom: 25px solid transparent; /* Who needs invisible borders? */
  border-left: 50px solid blue; /* My right-pointing triangle is a left border? */
}

这个技巧由来已久，并且在网络上的教程中得到了很好的记录。（Chris Coyier 最近制作了一个 巧妙的动画来解释其工作原理。）所以，也许你阅读了一些内容，理解了，自己也实现了。尽管如此，一个好的 mixin 的好处仍然显而易见，可以将上面的代码转换为一行易于理解的代码。

.triangle-right {
  @include scut-triangle(right, 50px, blue);
}

如果你想构建一个包含多个三角形（本身更复杂的三角形）的更复杂的形状怎么办？那么 mixin 的价值就更加突出了。

2. 模式值得使用简写

模式可能很容易自己编写——不复杂，非常直观——但它包含一组可以有效且定期地组合成命名简写的规则。

（当然，普通 CSS 已经包含了一些简写。Scut 只是添加了更多。）

例如，Scut 包含一些定位 mixin：而不是——

position: absolute;
top: 1em;
right: 2em;
bottom: 3em;
left: 4em;

——你可以使用 scut-absolute 并编写——

@mixin scut-absolute(1em 2em 3em 4em)

3. 模式涉及一些重要的最佳实践

你可能认为自己知道怎么做——但除非你很了解，并且阅读过所有正确的内容，否则你可能没有采用最佳方法。即使你曾经知道最佳方法，在你鼎盛时期，你可能已经忘记或错过了某些改变游戏规则的创新。

开源库非常适合解决这个问题。事实上，最佳实践是现有预处理器库非常强大的领域之一。因此，Scut 的最佳实践工具——例如 scut-font-face、scut-clearfix 和 scut-hd-bp（用于基于分辨率的媒体查询）——类似于你在 Bourbon 和 Compass 中找到的一些 mixin。

4. 模式非常常见，而且有点烦人

你始终如一地使用该模式——每个项目，通常每个项目多次。每次，你脑海中都会嘀咕“又来了？”，你的精神太阳上会掠过一片黑暗的心理乌云，一种转瞬即逝的意识，即你离死亡又近了几次按键。

如果我每次取消 margin、padding 和 list-style-type 在无样式列表上的作用都能得到一分钱——哦！我能买多少三明治——因此，Scut 的一些早期工具是 scut-list-unstyled 及其常见变体 scut-list-inline 和 scut-list-floated，如下所示（应用了各种“皮肤”，以演示抽象工具如何能够应用于各种设计场景）。

如何创建 Scut 工具？

简而言之：**最大化可重用性**。可重用性是将库就绪工具与项目特定工具区分开来的关键。

**包含实现模式的足够细节，但不要更多。**工具本身不应生成可用的组件。同样，Scut 不是关于传递精心构建的成品设计：而是关于促进构建和完成独特设计的过程。

使用参数以允许主题的典型变化。 在合理的情况下，为这些参数包含保守的默认值，这样用户不必每次都输入每个参数，并将这些参数按照它们可能被更改的顺序进行排列。此外，如果预期有无法放入参数中的常规自定义，请使用@content 块（在有意义的情况下）。

命名空间，以防止与其他库和项目特定代码发生冲突。Scut 为其所有部分添加了 scut- 前缀。这样，我们就可以在 Scut 中包含一个“clearfix”实用程序，而不用担心它会与 Bourbon 或 Compass 的 clearfix（没有命名空间）发生冲突。并且我们可以使用像“size”（scut-size）这样的通用实用程序名称，像“circle”（scut-circle）这样的通用变量名称，而不会破坏自然的平衡。

最后：彻底记录，记录好。我正在努力通过Scut 的文档做到这一点，当然，我也希望得到您的意见和建议。我们都曾因文档而感到沮丧，我们都经历过那种痛苦，所以我们都认识到**工具的有效可重用性与其文档的质量直接相关**。

现在来解决一些疑虑

我不使用 Sass

无论您的工作流程如何，无论您做出的选择好坏，Scut 都可能有所帮助，至少有一点帮助。如果您不使用 Sass，您仍然可以查看开源代码，并将其移植（到您选择的预处理器）或阅读它，以及 Scut 的文档，作为一个系列的迷你教程，一种样式模式参考。

我热爱 OOCSS 且无法事奉两个主人

面向对象 CSS（OOCSS）和 Scut 使用类似的解决方案解决了类似的问题：即**可扩展模式（或“对象”）**。但它们绝不相同。也许您是 OOCSS 爱好者，您认为所有这些 mixin 和 extends 都是低效的废话。您想要一个“clearfix”**类**，而不是一个会复制代码的**mixin**，或者一堆会使您的编译 CSS 混乱的 @extend 指令。您想用像 triangle triangle-large triangle-down triangle-red 这样的类列表来创建三角形，而不是多次调用一个带有不同参数的三角形 mixin。

好吧，没关系。这里没有必要争论预处理器与类繁重的编码约定、语义类名与表现类名等的优点，因为**Scut 并不排除 OOCSS 样式的编码**，或任何其他样式：只需**根据需要**调用 Scut 的实用程序来帮助创建对象的类及其扩展。

我不喜欢 Scut 的一些实用程序

请告诉我需要更改什么（在 Github 上提交问题），我们可以一起构建一个更好的 Scut。

另外，请记住，当前的一些实用程序比其他实用程序更具实验性。随着 Scut 在其不稳定的青春期（v0.x.x）中蹒跚而行，我正在寻找有兴趣弄清楚什么有效、什么无效、哪些实用程序可以改进项目的代码库，哪些实用程序可能会使其变得更加神秘和难以维护的合作者。

我认为这个想法很愚蠢

再说一次，欢迎您告诉我您会怎么做。向我展示它是如何完成的。或者，您可以走自己的路，做一些您喜欢的事情来让自己再次振作起来——吃块派，骑自行车——然后忘记您曾经读过这些。

好奇？信服？困惑？尝试使用和贡献 Scut

我希望我现在已经说得足够多了，足以说服您了解 Scut，也许稍微修改一下——或者，我敢希望，做出贡献。

如果您已准备好进行试运行，Scut 的文档将告诉您如何安装和应用该库。（基本上，使用Bower 或下载Github 上的最新版本，然后在您的 Sass 中 @import。非常简单。）

如果您正在考虑是否想为该项目贡献一些您自己的智慧，请不要犹豫。放手去做。Scut 是一个简单的库，一个简单的开源贡献——这对我们这些主要从事 HTML 和 CSS 工作并对涉足其他 Github 项目感到警惕的人来说尤其不错。Scut 的宗旨是让您的工作、我的工作以及其他开发人员的工作更**轻松**，甚至可能更好一点；将教程扩展为可重用的实用程序；鼓励最佳实践；并分享好的想法——这些都是我们可以达成一致的目标。我希望您会发现它是一个值得尝试的实验。