認識手寫筆

如果您是前端開發人員，您可能聽說過 Stylus，Sass 的遠房親戚，鮮為人知。與 Sass 一樣，Stylus 也是一個用 Node.js 編寫的 CSS 預處理器。根據其 GitHub 代碼庫，它自稱為：

[…] 一種革命性的新語言，提供了一種高效、動態且富有表現力的方式來生成 CSS。

好吧，“革命性”可能有點誇張。但其他一切都是真的。

關鍵要點

• Stylus 是一個用 Node.js 編寫的 CSS 預處理器，其語法比 Sass 等類似工具更寬鬆。它允許可選使用括號、冒號和分號，並支持縮進語法和常規 CSS 樣式。
• Stylus 支持使用變量、函數和 mixin，使 CSS 更接近真正的編程語言。它還具有屬性值查找功能，並能夠根據屬性是否已定義有條件地輸出屬性。
• 儘管 Stylus 非常靈活，但使用 Stylus 需要遵守語法規則以避免混淆。它可以使用 Node.js 和 npm 安裝，並使用 stylus 命令編譯成 CSS。 Stylus 也有自己的框架 Nib，提供額外的輔助工具和跨瀏覽器支持 mixin。

什麼，又一個？ ！

有點像。但 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>

編寫 Stylus 樣式

如果您剛開始學習並且不想被新的語法弄得不知所措，請知道您可以在 .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

說到這裡，讓我們定義一個 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 的常見問題解答 (FAQs)

Stylus 與其他 CSS 預處理器之間有哪些主要區別？

Stylus 是一種功能強大且靈活的動態樣式表語言。與 Sass 和 Less 等其他 CSS 預處理器不同，Stylus 允許可選使用括號、冒號和分號，使其更靈活且不太嚴格。它還支持縮進語法和常規 CSS 樣式，讓開發人員在編寫代碼時擁有更大的自由度。此外，Stylus 支持透明 mixin，這意味著您可以無需使用任何特殊語法即可調用 mixin。

如何安裝 Stylus？

可以使用 Node.js 和 npm（Node 包管理器）安裝 Stylus。首先，您需要在計算機上安裝 Node.js 和 npm。安裝完成後，您可以通過在終端或命令提示符中運行命令 npm install stylus -g 來全局安裝 Stylus。這將允許您從計算機上的任何目錄使用 Stylus。

如何將 Stylus 編譯成 CSS？

編寫 Stylus 代碼後，可以使用終端或命令提示符中的 stylus 命令將其編譯成 CSS。例如，如果您的 Stylus 文件名為 style.styl，則應運行命令 stylus -c style.styl。這將在同一目錄中創建一個名為 style.css 的 CSS 文件。

我可以在 Stylus 中使用變量嗎？

是的，Stylus 支持使用變量。您可以通過為名稱賦值來定義變量。例如，font-size = 14px。然後，您可以通過引用其名稱在代碼的其他地方使用此變量，如下所示：p { font-size: font-size; }。

Stylus 是否支持函數和 mixin？

是的，Stylus 支持函數和 mixin。 Stylus 中的函數使用 def 關鍵字定義，可用於執行計算或操作值。另一方面，mixin 是可重用的代碼塊，可以包含在其他規則集中。

如何在 Stylus 中使用條件語句？

Stylus 使用 if、else if 和 else 關鍵字支持條件語句。這些可用於根據某些條件應用不同的樣式。例如，您可以使用條件語句根據屏幕尺寸應用不同的字體大小。

我可以導入其他 Stylus 文件嗎？

是的，Stylus 允許您使用 @import 指令導入其他 Stylus 文件。這對於將代碼組織成單獨的文件並在多個樣式表中重用代碼非常有用。

Stylus 是否支持循環？

是的，Stylus 支持 for 和 while 循環。這些可用於生成重複的 CSS 規則或迭代列表和數組。

我可以將 Stylus 與 Node.js 一起使用嗎？

是的，Stylus 可以與 Node.js 一起使用。事實上，Stylus 是基於 Node.js 構建的，可以使用 npm（Node 包管理器）安裝。您還可以將 Stylus 與 Express 一起使用，Express 是 Node.js 的一個流行的 Web 應用程序框架。

如何調試 Stylus 代碼？

Stylus 提供一個 --debug 標誌，可用於輸出調試信息。這對於跟踪錯誤或了解代碼的處理方式很有幫助。此外，您可以在 Stylus 中使用 inspect() 函數來輸出變量或表達式的值。

以上是認識手寫筆的詳細內容。更多資訊請關注PHP中文網其他相關文章！