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

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

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

關(guān)鍵要點

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

什麼，又一個？ ！

有點像。但 Stylus 並非全新事物。它自 2011 年初就已存在，但我認(rèn)為它擁有一個相當(dāng)?shù)驼{(diào)的社區(qū)。順便說一句，您知道最新的 Mozilla 開發(fā)者網(wǎng)絡(luò)重新設(shè)計是用 Stylus 完成的嗎？參與該項目的 David Walsh 也撰寫了關(guān)於如何開始使用 Stylus 的文章。

那麼，與 Sass 相比，Stylus 的優(yōu)勢是什麼呢？好吧，它是用 Node.js 構(gòu)建的，在我看來這算是一個優(yōu)點。雖然由於 Node-Sass LibSass 包裝器，在 Node 工作流程中使用 Sass 完全沒問題，但這並不意味著 LibSass 完全是用 Node 編寫的。

此外，Stylus 具有極其寬鬆的語法，這可能是好是壞，取決於您的項目、團(tuán)隊以及您堅持嚴(yán)格編碼規(guī)範(fàn)的傾向。我認(rèn)為只要您不在樣式表中包含太多邏輯，並在提交代碼之前進(jìn)行代碼檢查，寬鬆的語法應(yīng)該沒問題。

總而言之，Stylus 和 Sass 都幾乎支持相同的功能；您可以查看 Stylus 功能的完整列表，但不要期望有什麼突破性的東西（儘管有一些很不錯的新功能）。 Stylus 還支持多種語法，儘管界限比Sass 模糊得多：您可以幾乎按照自己想要的方式編寫樣式（縮進(jìn)式、CSS 樣式），並且可以在同一個樣式表中混合搭配（這個解析器一定很有趣）。

那麼您怎麼看？想試試嗎？

入門

如前所述，Stylus 是用 Node.js 編寫的，因此我們可以像安裝任何其他 npm 包一樣安裝它：

<code>$ npm install stylus -g</code>

從那裡，您可以使用 JavaScript API 將其插入到您的 Node 工作流程中，也可以使用命令行可執(zhí)行文件來編譯您的樣式表。為了簡單起見，我們將使用 stylus 命令行工具，但您可以隨意從 Node 腳本、Gulp 或 Grunt 中進(jìn)行處理。

<code>stylus ./stylesheets/ --out ./public/css</code>

前面的命令告訴 stylus 從 stylesheets 文件夾編譯所有 Stylus 樣式表 (.styl)，並在 public/css 文件夾中生成它們。當(dāng)然，您也可以監(jiān)視目錄的變化：

<code>stylus --watch ./stylesheets/ --out ./public/css</code>

編寫 Stylus 樣式

如果您剛開始學(xué)習(xí)並且不想被新的語法弄得不知所措，請知道您可以在 .styl 文件中編寫純 CSS。由於 Stylus 支持標(biāo)準(zhǔn) CSS 語法，因此只使用 CSS 代碼然後慢慢增強(qiáng)它完全沒問題。

基本語法

關(guān)於語法本身，幾乎所有內(nèi)容都是可選的。大括號：為什麼要費(fèi)心？分號：算了吧！冒號：也扔掉吧。括號：拜託。以下是完全有效的 Stylus 代碼：

<code>.foo
.bar
  color tomato
  background deepskyblue</code>

一開始有點令人不安，但我們可以習(xí)慣它，尤其是在有語法高亮顯示的情況下。正如您可能猜到的那樣，前面的代碼編譯成：

<code>.foo, .bar {
  color: tomato;
  background: deepskyblue;
}</code>

變量

CSS 預(yù)處理器的最常用功能必須是定義變量的能力。 Stylus 也提供它並不奇怪。儘管與 Sass 相反，它們是用等號 (=) 而不是冒號 (:) 聲明的。此外，前導(dǎo)美元符號 ($) 是可選的，可以安全地省略。

<code>// 定義 `text-font-stack` 變量
text-font-stack = 'Helvetica', 'Arial', sans-serif;

// 將其用作 `font` 屬性的一部分
body
  font 125% / 1.5 text-font-stack</code>

現(xiàn)在 Stylus 做了一些 Sass 或任何其他預(yù)處理器都不做的事情：屬性值查找。假設(shè)您想應(yīng)用等於寬度一半的負(fù)左邊距；在 Sass 中，您必須將寬度存儲在一個變量中，但在 Stylus 中則不需要：

<code>.foo
  width 400px
  position absolute
  left 50%
  margin-left (@width / 2)</code>

通過使用 @width，我們告訴 Stylus 獲取當(dāng)前塊的 width 屬性的值，將其視為變量。非常巧妙！另一個有趣的用例是根據(jù)屬性是否已定義有條件地輸出屬性：

<code>.foo
  // ... 其他樣式
  z-index: 1 unless @z-index</code>

在這種情況下，除非 .foo 已為 z-index 屬性分配值，否則 z-index 將設(shè)置為 1。將其與 mixin 結(jié)合使用，您就真正擁有了一些東西。

Mixin

說到這裡，讓我們定義一個 mixin，因為它可能是 Sass 最流行的功能之一！ Stylus 中的 mixin 不需要特定的關(guān)鍵字；只要它在其名稱的末尾帶有括號（空或非空），它就是一個 mixin。

<code>size(width, height = width)
  width width
  height height</code>

同樣，包含 mixin 不需要像 @include 或 這樣的特定語法：

<code>.foo
  size(100px)</code>

如果您願意，您甚至可以刪除括號，在這種情況下，它看起來像您使用的是完全標(biāo)準(zhǔn)的（但並非如此）CSS 屬性。這種機(jī)制被稱為 透明 mixin，因為它們的包含是不可見的。

<code>.foo
  size 100px</code>

乍一看這可能看起來像個不必要的技巧，但如果您仔細(xì)考慮一下，這個功能實際上允許作者擴(kuò)展默認(rèn)的 CSS 語法?？紤]以下 overflow mixin：

<code>$ npm install stylus -g</code>

如果給定的值為 ellipsis，它將打印獲得單行省略號溢出所需的眾所周知的聲明三元組。否則，它將打印給定的值。以下是使用方法：

<code>stylus ./stylesheets/ --out ./public/css</code>

它將產(chǎn)生：

<code>stylus --watch ./stylesheets/ --out ./public/css</code>

您必須承認(rèn)，這是一個非常酷的技巧。雖然它可能令人困惑（並且可能很危險），但能夠使用額外值擴(kuò)展標(biāo)準(zhǔn) CSS 屬性實際上是一個有趣的概念。

如果您想以 @content 的方式將一些內(nèi)容傳遞給 mixin，則可以通過 {block} 變量實現(xiàn)。在包含期間，您只需要在 mixin 名稱前添加 即可傳遞額外內(nèi)容。

<code>.foo
.bar
  color tomato
  background deepskyblue</code>

此代碼將編譯為：

<code>.foo, .bar {
  color: tomato;
  background: deepskyblue;
}</code>

Stylus mixin 的最後一個非常有趣的功能：它們始終有一個 arguments 局部變量，其中包含包含時傳遞給 mixin 的所有參數(shù)（如果有）。例如，可以使用 [..] 像在 JavaScript 中一樣操作此變量並將其視為數(shù)組，以獲取特定索引處的值。

最終想法

遍歷 Stylus 的所有功能和語法技巧將過於冗長，我認(rèn)為我們已經(jīng)有了很好的介紹，至少足以開始學(xué)習(xí)！

如您所見，Stylus 非常寬鬆。在所有現(xiàn)有的 CSS 編寫輔助工具中，Stylus 絕對是將 CSS 最接近真正編程語言的工具。

請注意，Stylus 也擁有自己的框架，就像 Sass 擁有 Compass 一樣，它被稱為 Nib。 Nib 是一個工具箱，為 Stylus 提供額外的輔助工具和跨瀏覽器支持 mixin。

有些人可能喜歡它，有些人可能不喜歡。我的建議是嚴(yán)格遵守語法。處理如此寬鬆的語法並不總是那麼輕鬆。無論如何，看到 Sass 的一些不錯的競爭對手是很好的。

關(guān)於 Stylus 的常見問題解答 (FAQs)

Stylus 與其他 CSS 預(yù)處理器之間有哪些主要區(qū)別？

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

如何安裝 Stylus？

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

如何將 Stylus 編譯成 CSS？

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

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

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

Stylus 是否支持函數(shù)和 mixin？

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

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

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

我可以導(dǎo)入其他 Stylus 文件嗎？

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

Stylus 是否支持循環(huán)？

是的，Stylus 支持 for 和 while 循環(huán)。這些可用於生成重複的 CSS 規(guī)則或迭代列表和數(shù)組。

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

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

如何調(diào)試 Stylus 代碼？

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

以上是認(rèn)識手寫筆的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！