如果您是前端開發(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 代碼然後慢慢增強它完全沒問題。

基本語法

關(guān)於語法本身，幾乎所有內(nè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 屬性。這種機制被稱為 透明 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 是一種功能強大且靈活的動態(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。首先，您需要在計算機上安裝 Node.js 和 npm。安裝完成後，您可以通過在終端或命令提示符中運行命令 npm install stylus -g 來全局安裝 Stylus。這將允許您從計算機上的任何目錄使用 Stylus。

如何將 Stylus 編譯成 CSS？

編寫 Stylus 代碼後，可以使用終端或命令提示符中的 stylus 命令將其編譯成 CSS。例如，如果您的 Stylus 文件名為 style.styl，則應(yīng)運行命令 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 文件。這對於將代碼組織成單獨的文件並在多個樣式表中重用代碼非常有用。

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)文章！