如果您是前端开发人员，您可能听说过 Stylus，Sass 的远房亲戚，鲜为人知。与 Sass 一样，Stylus 也是一个用 Node.js 编写的 CSS 预处理器。根据其 GitHub 代码库，它自称为：
[…] 一种革命性的新语言，提供了一种高效、动态且富有表现力的方式来生成 CSS。
好吧，“革命性”可能有点夸张。但其他一切都是真的。
有点像。但 Stylus 并非全新事物。它自 2011 年初就已存在，但我认为它拥有一个相当低调的社区。顺便说一句，您知道最新的 Mozilla 开发者网络重新设计是用 Stylus 完成的吗？参与该项目的 David Walsh 也撰写了关于如何开始使用 Stylus 的文章。
那么，与 Sass 相比，Stylus 的优势是什么呢？好吧，它是用 Node.js 构建的，在我看来这算是一个优点。虽然由于 Node-Sass LibSass 包装器，在 Node 工作流程中使用 Sass 完全没问题，但这并不意味着 LibSass 完全是用 Node 编写的。
此外，Stylus 具有极其宽松的语法，这可能是好是坏，取决于您的项目、团队以及您坚持严格编码规范的倾向。我认为只要您不在样式表中包含太多逻辑，并在提交代码之前进行代码检查，宽松的语法应该没问题。
总而言之，Stylus 和 Sass 都几乎支持相同的功能；您可以查看 Stylus 功能的完整列表，但不要期望有什么突破性的东西（尽管有一些很不错的新功能）。Stylus 还支持多种语法，尽管界限比 Sass 模糊得多：您可以几乎按照自己想要的方式编写样式（缩进式、CSS 样式），并且可以在同一个样式表中混合搭配（这个解析器一定很有趣）。
那么您怎么看？想试试吗？
如前所述，Stylus 是用 Node.js 编写的，因此我们可以像安装任何其他 npm 包一样安装它：
<code>$ npm install stylus -g</code>
从那里，您可以使用 JavaScript API 将其插入到您的 Node 工作流程中，也可以使用命令行可执行文件来编译您的样式表。为了简单起见，我们将使用 stylus 命令行工具，但您可以随意从 Node 脚本、Gulp 或 Grunt 中进行处理。
<code>stylus ./stylesheets/ --out ./public/css</code>
前面的命令告诉 stylus 从 stylesheets 文件夹编译所有 Stylus 样式表 (.styl)，并在 public/css 文件夹中生成它们。当然，您也可以监视目录的变化：
<code>stylus --watch ./stylesheets/ --out ./public/css</code>
如果您刚开始学习并且不想被新的语法弄得不知所措，请知道您可以在 .styl 文件中编写纯 CSS。由于 Stylus 支持标准 CSS 语法，因此只使用 CSS 代码然后慢慢增强它完全没问题。
关于语法本身，几乎所有内容都是可选的。大括号：为什么要费心？分号：算了吧！冒号：也扔掉吧。括号：拜托。以下是完全有效的 Stylus 代码：
<code>.foo .bar color tomato background deepskyblue</code>
一开始有点令人不安，但我们可以习惯它，尤其是在有语法高亮显示的情况下。正如您可能猜到的那样，前面的代码编译成：
<code>.foo, .bar {
color: tomato;
background: deepskyblue;
}</code>CSS 预处理器的最常用功能必须是定义变量的能力。Stylus 也提供它并不奇怪。尽管与 Sass 相反，它们是用等号 (=) 而不是冒号 (:) 声明的。此外，前导美元符号 ($) 是可选的，可以安全地省略。
<code>// 定义 `text-font-stack` 变量 text-font-stack = 'Helvetica', 'Arial', sans-serif; // 将其用作 `font` 属性的一部分 body font 125% / 1.5 text-font-stack</code>
现在 Stylus 做了一些 Sass 或任何其他预处理器都不做的事情：属性值查找。假设您想应用等于宽度一半的负左边距；在 Sass 中，您必须将宽度存储在一个变量中，但在 Stylus 中则不需要：
<code>.foo width 400px position absolute left 50% margin-left (@width / 2)</code>
通过使用 @width，我们告诉 Stylus 获取当前块的 width 属性的值，将其视为变量。非常巧妙！另一个有趣的用例是根据属性是否已定义有条件地输出属性：
<code>.foo // ... 其他样式 z-index: 1 unless @z-index</code>
在这种情况下，除非 .foo 已为 z-index 属性分配值，否则 z-index 将设置为 1。将其与 mixin 结合使用，您就真正拥有了一些东西。
说到这里，让我们定义一个 mixin，因为它可能是 Sass 最流行的功能之一！Stylus 中的 mixin 不需要特定的关键字；只要它在其名称的末尾带有括号（空或非空），它就是一个 mixin。
<code>size(width, height = width) width width height height</code>
同样，包含 mixin 不需要像 @include 或 这样的特定语法：
<code>.foo size(100px)</code>
如果您愿意，您甚至可以删除括号，在这种情况下，它看起来像您使用的是完全标准的（但并非如此）CSS 属性。这种机制被称为 透明 mixin，因为它们的包含是不可见的。
<code>.foo size 100px</code>
乍一看这可能看起来像个不必要的技巧，但如果您仔细考虑一下，这个功能实际上允许作者扩展默认的 CSS 语法。考虑以下 overflow mixin：
<code>$ npm install stylus -g</code>
如果给定的值为 ellipsis，它将打印获得单行省略号溢出所需的众所周知的声明三元组。否则，它将打印给定的值。以下是使用方法：
<code>stylus ./stylesheets/ --out ./public/css</code>
它将产生：
<code>stylus --watch ./stylesheets/ --out ./public/css</code>
您必须承认，这是一个非常酷的技巧。虽然它可能令人困惑（并且可能很危险），但能够使用额外值扩展标准 CSS 属性实际上是一个有趣的概念。
如果您想以 @content 的方式将一些内容传递给 mixin，则可以通过 {block} 变量实现。在包含期间，您只需要在 mixin 名称前添加 即可传递额外内容。
<code>.foo .bar color tomato background deepskyblue</code>
此代码将编译为：
<code>.foo, .bar {
color: tomato;
background: deepskyblue;
}</code>Stylus mixin 的最后一个非常有趣的功能：它们始终有一个 arguments 局部变量，其中包含包含时传递给 mixin 的所有参数（如果有）。例如，可以使用 [..] 像在 JavaScript 中一样操作此变量并将其视为数组，以获取特定索引处的值。
遍历 Stylus 的所有功能和语法技巧将过于冗长，我认为我们已经有了很好的介绍，至少足以开始学习！
如您所见，Stylus 非常宽松。在所有现有的 CSS 编写辅助工具中，Stylus 绝对是将 CSS 最接近真正编程语言的工具。
请注意，Stylus 也拥有自己的框架，就像 Sass 拥有 Compass 一样，它被称为 Nib。Nib 是一个工具箱，为 Stylus 提供额外的辅助工具和跨浏览器支持 mixin。
有些人可能喜欢它，有些人可能不喜欢。我的建议是严格遵守语法。处理如此宽松的语法并不总是那么轻松。无论如何，看到 Sass 的一些不错的竞争对手是很好的。
Stylus 是一种功能强大且灵活的动态样式表语言。与 Sass 和 Less 等其他 CSS 预处理器不同，Stylus 允许可选使用括号、冒号和分号，使其更灵活且不太严格。它还支持缩进语法和常规 CSS 样式，让开发人员在编写代码时拥有更大的自由度。此外，Stylus 支持透明 mixin，这意味着您可以无需使用任何特殊语法即可调用 mixin。
可以使用 Node.js 和 npm（Node 包管理器）安装 Stylus。首先，您需要在计算机上安装 Node.js 和 npm。安装完成后，您可以通过在终端或命令提示符中运行命令 npm install stylus -g 来全局安装 Stylus。这将允许您从计算机上的任何目录使用 Stylus。
编写 Stylus 代码后，可以使用终端或命令提示符中的 stylus 命令将其编译成 CSS。例如，如果您的 Stylus 文件名为 style.styl，则应运行命令 stylus -c style.styl。这将在同一目录中创建一个名为 style.css 的 CSS 文件。
是的，Stylus 支持使用变量。您可以通过为名称赋值来定义变量。例如，font-size = 14px。然后，您可以通过引用其名称在代码的其他地方使用此变量，如下所示：p { font-size: font-size; }。
是的，Stylus 支持函数和 mixin。Stylus 中的函数使用 def 关键字定义，可用于执行计算或操作值。另一方面，mixin 是可重用的代码块，可以包含在其他规则集中。
Stylus 使用 if、else if 和 else 关键字支持条件语句。这些可用于根据某些条件应用不同的样式。例如，您可以使用条件语句根据屏幕尺寸应用不同的字体大小。
是的，Stylus 允许您使用 @import 指令导入其他 Stylus 文件。这对于将代码组织成单独的文件并在多个样式表中重用代码非常有用。
是的，Stylus 支持 for 和 while 循环。这些可用于生成重复的 CSS 规则或迭代列表和数组。
是的，Stylus 可以与 Node.js 一起使用。事实上，Stylus 是基于 Node.js 构建的，可以使用 npm（Node 包管理器）安装。您还可以将 Stylus 与 Express 一起使用，Express 是 Node.js 的一个流行的 Web 应用程序框架。
Stylus 提供一个 --debug 标志，可用于输出调试信息。这对于跟踪错误或了解代码的处理方式很有帮助。此外，您可以在 Stylus 中使用 inspect() 函数来输出变量或表达式的值。
以上是认识手写笔的详细内容。更多信息请关注PHP中文网其他相关文章！
