Stylus 是一種 CSS 預(yù)處理器，具有以下十大特點：

1. 簡潔的語法

Stylus 使用類似于 Python 的縮進風(fēng)格的語法，可以省略大括號和分號，使代碼更加簡潔易讀。

當(dāng)涉及到Stylus的簡潔語法時，以下是一個實際的代碼案例來展示其特點：

// 定義變量
primary-color = #ff0000
secondary-color = #00ff00

// 嵌套規(guī)則和屬性定義
body
  font-size 14px
  color primary-color
  
  // 子選擇器
  p
    margin 10px
    padding 5px

    // 偽類選擇器
    &:hover
      background-color secondary-color

// Mixin 混合
rounded-border()
  border-radius 5px

.button
  background-color primary-color
  color #fff
  padding 10px
  rounded-border()

// 使用條件語句
if browser-prefixes
  -webkit-border-radius 5px
  -moz-border-radius 5px
  -ms-border-radius 5px
  -o-border-radius 5px
  border-radius 5px

在這個例子中，我們可以看到 Stylus 的簡潔語法。它省略了大括號和分號，并且使用縮進進行嵌套規(guī)則的表示。

在代碼中，我們首先定義了兩個變量 primary-color 和 secondary-color，分別表示主要顏色和次要顏色。

然后，使用嵌套規(guī)則來定義整個頁面的樣式。body 元素具有 14px 的字體大小，顏色為 primary-color。其中的 p 元素有一些 margin、padding，而且在懸停時會改變背景顏色。

接下來，我們定義了一個 Mixin（混合），名為 rounded-border，用于設(shè)置圓角邊框樣式。然后，我們將其應(yīng)用到 .button 類選擇器上，并設(shè)置一些其他樣式屬性。

最后，我們使用條件語句來判斷是否需要添加瀏覽器前綴，以便在不同瀏覽器中都能正常顯示圓角邊框。

通過這個簡潔的示例，可以清晰地看到 Stylus 的語法簡潔性，以及如何使用變量、嵌套規(guī)則、Mixin 和條件語句來提高開發(fā)效率和代碼的可讀性。

2. 強大的功能

Stylus 提供了豐富的功能，如變量、嵌套規(guī)則、混合（Mixin）、繼承、運算符等，可以提高代碼的可維護性和重用性。

當(dāng)涉及到 Stylus 的功能時，以下是一個實際的代碼案例來展示如何使用變量、嵌套規(guī)則、Mixin、繼承和運算符來提高代碼的可維護性和重用性：

// 定義變量
primary-color = #ff0000
secondary-color = #00ff00

// 嵌套規(guī)則和屬性定義
body
  font-size 14px
  color primary-color

  // 子選擇器
  p
    margin 10px
    padding 5px

    // 偽類選擇器
    &:hover
      background-color secondary-color

// Mixin 混合
rounded-border()
  border-radius 5px

button
  .primary
    background-color primary-color
    color #fff
    padding 10px
    rounded-border()

  .secondary
    background-color secondary-color
    color #000
    padding 8px
    rounded-border()

// 繼承
.sidebar
  width 200px
  height 100%
  background-color #f2f2f2
  padding 10px

.content
  height 100%
  padding 20px
  font-family Arial
  background-color #fff

// 運算符
container-width = 800px

.container
  width container-width
  margin 0 auto

在這個例子中，我們使用了多個 Stylus 的功能來提高代碼的可維護性和重用性。

首先，我們定義了兩個變量 primary-color 和 secondary-color 來表示主要顏色和次要顏色。

然后，使用嵌套規(guī)則和選擇器來定義頁面的樣式。body 元素具有 14px 的字體大小，并且文字顏色為 primary-color。p 元素有一些 margin 和 padding，懸停時會改變背景顏色為 secondary-color。

接下來，我們定義了一個 Mixin（混合） named rounded-border，用于設(shè)置圓角邊框樣式。然后，我們在 .button 類選擇器中應(yīng)用了這個 Mixin，并設(shè)置了不同的背景顏色、文字顏色、padding 等屬性，分別表示主要樣式和次要樣式。

然后，我們使用繼承來創(chuàng)建 .sidebar 和 .content 的樣式。.sidebar 繼承了寬度、高度、背景顏色和內(nèi)邊距等屬性，.content 繼承了高度、內(nèi)邊距、字體和背景顏色等屬性。這樣可以避免重復(fù)編寫相似的樣式。

最后，我們使用了運算符，將容器的寬度通過變量 container-width 進行計算，并將其應(yīng)用到 .container 類選擇器上。

通過這個示例，展示了如何使用變量、嵌套規(guī)則、Mixin、繼承和運算符等 Stylus 的功能來提高代碼的可維護性和重用性，同時保持代碼的簡潔性和可讀性。

3. 嵌套規(guī)則

Stylus 支持嵌套規(guī)則，可以避免重復(fù)書寫選擇器，并且可以更好地表達HTML標(biāo)簽之間的層次關(guān)系。
當(dāng)涉及到 Stylus 的嵌套規(guī)則時，以下是一個代碼案例來展示如何使用嵌套規(guī)則來避免重復(fù)書寫選擇器，并更好地表達 HTML 標(biāo)簽之間的層次關(guān)系：

// 默認(rèn)樣式
body
  font-family Arial, sans-serif
  font-size 16px

.container
  max-width 1200px
  margin 0 auto
  padding 20px

.header
  background-color #f2f2f2
  padding 10px

.title
  font-size 24px
  color #333
  margin-bottom 10px

.nav
  ul
    list-style none
    padding 0
    margin 0

  li
    display inline-block
    margin-right 10px

    a
      text-decoration none
      color #666

.content
  padding 10px
  background-color #fff

.footer
  background-color #f2f2f2
  padding 10px
  text-align center

在這個例子中，我們使用了嵌套規(guī)則來避免重復(fù)書寫選擇器，并更好地表達 HTML 標(biāo)簽之間的層次關(guān)系。

首先，我們設(shè)置了默認(rèn)樣式，為整個頁面的字體和字體大小。

然后，我們定義了一個 .container 類選擇器，它包含了整個頁面的最大寬度、居中對齊的邊距等屬性。

在 .header 類選擇器內(nèi)部，我們設(shè)置了背景顏色和內(nèi)邊距。

在 .title 類選擇器內(nèi)部，我們設(shè)置了標(biāo)題的字體大小、顏色和底部邊距。

在 .nav 類選擇器內(nèi)部，我們通過嵌套規(guī)則來定義了無序列表的樣式，包括列表項的樣式、鏈接的文本裝飾和顏色。

在 .content 類選擇器內(nèi)部，我們設(shè)置了內(nèi)容區(qū)域的內(nèi)邊距和背景顏色。

在 .footer 類選擇器內(nèi)部，我們設(shè)置了頁腳的背景顏色、內(nèi)邊距和居中對齊的文本。

通過以上示例，我們可以看到 Stylus 的嵌套規(guī)則如何幫助我們避免重復(fù)書寫選擇器，并更好地表達 HTML 標(biāo)簽之間的層次關(guān)系，從而提高代碼的可讀性和維護性。

4. 變量支持

Stylus 允許定義和使用變量，可以方便地在樣式表中管理顏色、尺寸等可復(fù)用的值。

當(dāng)涉及到 Stylus 的變量時，以下是一個代碼案例來展示如何定義和使用變量來方便地管理顏色、尺寸等可復(fù)用的值：

// 定義變量
primary-color = #ff0000
secondary-color = #00ff00
font-size-large = 24px
container-width = 1200px

// 使用變量
body
  font-family Arial, sans-serif
  font-size font-size-large

.container
  max-width container-width
  margin 0 auto

.header
  background-color primary-color
  padding 10px

.title
  font-size font-size-large
  color #333
  margin-bottom 10px

.nav
  ul
    list-style none
    padding 0
    margin 0

  li
    display inline-block
    margin-right 10px

    a
      text-decoration none
      color secondary-color

.content
  padding 10px
  background-color #fff

.footer
  background-color primary-color
  padding 10px
  text-align center

在這個例子中，我們使用了變量來方便地管理顏色、尺寸等可復(fù)用的值。

首先，我們定義了幾個變量，如 primary-color 和 secondary-color 分別表示主要顏色和次要顏色。font-size-large 表示大號字體大小，container-width 表示容器的最大寬度。

然后，在樣式表中使用這些變量。我們將字體設(shè)置為 Arial，字體大小設(shè)置為 font-size-large。

在 .container 類選擇器中，我們將最大寬度設(shè)置為 container-width，并將邊距設(shè)置為自動。

在 .header 類選擇器中，我們將背景顏色設(shè)置為 primary-color，并設(shè)置內(nèi)邊距。

在 .title 類選擇器中，我們將字體大小設(shè)置為 font-size-large，文字顏色設(shè)置為 #333，底部設(shè)置為 10px 的外邊距。

在 .nav 類選擇器內(nèi)部，我們將無序列表的樣式設(shè)置為無序列表項的樣式，并將鏈接的文字顏色設(shè)置為 secondary-color。

在 .content 類選擇器內(nèi)部，我們設(shè)置了內(nèi)容區(qū)域的內(nèi)邊距和背景顏色。

在 .footer 類選擇器內(nèi)部，我們將背景顏色設(shè)置為 primary-color，設(shè)置內(nèi)邊距，并居中對齊文本。

通過使用變量，我們可以將可復(fù)用的值定義為變量，并在樣式表中使用這些變量，從而方便地管理顏色、尺寸等屬性值。這樣可以提高代碼的可維護性和重用性。

5. Mixin 混合

Stylus 的 Mixin 是一種可以重復(fù)使用的代碼塊，可以在不同的選擇器中引用，并且支持參數(shù)傳遞，提供了更好的代碼復(fù)用性。

當(dāng)涉及到 Stylus 的 Mixin 時，以下是一個代碼案例來展示如何定義和使用 Mixin 來重復(fù)使用代碼塊，并支持參數(shù)傳遞，提供更好的代碼復(fù)用性：

// 定義 Mixin
mixin centerElement()
  display flex
  justify-content center
  align-items center

// 使用 Mixin
.container
  width 100%
  height 300px
  background-color #f2f2f2
  mixin centerElement()

.box
  width 200px
  height 200px
  background-color #ccc
  mixin centerElement()

.text
  font-size 18px
  color #333

在這個例子中，我們定義了一個名為 centerElement 的 Mixin，它是一個可以重復(fù)使用的代碼塊，并且它沒有參數(shù)傳遞。

然后，在樣式表中使用該 Mixin。在 .container 類選擇器中，我們先設(shè)置寬度、高度和背景顏色，然后通過 mixin centerElement() 引用了 centerElement Mixin，在該選擇器中使用了 display: flex 和居中對齊的屬性。

在 .box 類選擇器內(nèi)部，我們設(shè)置了盒子的寬度、高度和背景顏色，然后再次通過 mixin centerElement() 引用了 centerElement Mixin，以實現(xiàn)居中對齊。

在 .text 類選擇器內(nèi)部，我們設(shè)置了文字的字體大小和顏色，該選擇器沒有使用 Mixin。

通過使用 Mixin，我們可以將一段代碼塊定義為 Mixin，并在不同的選擇器中引用該 Mixin，從而實現(xiàn)代碼的重復(fù)使用。如果需要，我們還可以通過參數(shù)傳遞來定制代碼塊的行為。這樣可以提高代碼的復(fù)用性和維護性。

6. 擴展支持

Stylus 提供了 extend 語法，可以將一個選擇器繼承到另一個選擇器上，避免了冗余的代碼。

當(dāng)涉及到 Stylus 的 Extend 語法時，以下是一個代碼案例來展示如何使用 Extend 將一個選擇器繼承到另一個選擇器上，避免冗余的代碼：

// 定義選擇器
.base-button
  padding 10px
  border 1px solid #ccc
  border-radius 5px
  text-align center
  cursor pointer

.primary-button
  background-color #ff0000
  color #fff
  extend .base-button

.secondary-button
  background-color #00ff00
  color #fff
  extend .base-button

// 使用選擇器
.button-container
  display flex

.submit-button
  extend .primary-button
  margin-right 10px

.cancel-button
  extend .secondary-button

在這個例子中，我們定義了兩個選擇器 .base-button、.primary-button 和 .secondary-button。

.base-button 定義了一些基本的按鈕樣式，如內(nèi)邊距、邊框、圓角和居中對齊。這樣的定義可以避免在每個按鈕選擇器中重復(fù)寫這些公共樣式。

.primary-button 和 .secondary-button 分別定義了主要按鈕和次要按鈕的樣式。我們使用 extend .base-button 將 .base-button 選擇器繼承到這兩個選擇器上，這意味著它們會繼承 .base-button 的所有樣式。

在使用選擇器時，我們創(chuàng)建了一個 .button-container 類選擇器來包含按鈕。然后，我們分別創(chuàng)建了一個 .submit-button 類選擇器和一個 .cancel-button 類選擇器，使用 extend 將 .primary-button 和 .secondary-button 繼承到它們上面。這樣，它們會繼承 .base-button 和相應(yīng)的特定按鈕樣式，避免了冗余的代碼。

通過使用 Extend 語法，我們可以將一個選擇器的樣式繼承到另一個選擇器上，從而避免在多個選擇器中重復(fù)寫相同的樣式，提高了代碼的重用性和可維護性。

7. 條件語句

Stylus 支持條件語句，可以根據(jù)條件來動態(tài)生成樣式，增強了樣式表的靈活性。

當(dāng)涉及到 Stylus 的條件語句時，以下是一個代碼案例來展示如何使用條件語句來動態(tài)生成樣式，增強樣式表的靈活性：

// 定義變量
$theme = 'dark'

// 使用條件語句生成樣式
.container
  width 100%
  height 300px
  background-color if($theme == 'dark', #333, #f2f2f2)
  color if($theme == 'dark', #fff, #333)

.button
  padding 10px
  border-radius if($theme == 'dark', 5px, 10px)
  background-color if($theme == 'dark', #ff0000, #00ff00)
  color if($theme == 'dark', #fff, #000)

.text
  font-size if($theme == 'dark', 16px, 14px)
  color if($theme == 'dark', #ccc, #666)

在這個例子中，我們定義了一個名為 $theme 的變量，用于指定主題樣式（可以是 ‘dark’ 或 ‘light’）。

然后，我們使用條件語句來根據(jù) $theme 的值動態(tài)生成樣式。在 .container 類選擇器中，我們設(shè)置了寬度、高度和背景顏色，根據(jù) $theme 的值選擇不同的背景顏色和文字顏色。

在 .button 類選擇器內(nèi)部，我們設(shè)置了按鈕的內(nèi)邊距、邊框半徑、背景顏色和文字顏色，同樣根據(jù) $theme 的值選擇不同的樣式。

在 .text 類選擇器內(nèi)部，我們設(shè)置了文字的字體大小和顏色，同樣根據(jù) $theme 的值選擇不同的樣式。

通過使用條件語句，我們可以根據(jù)不同的條件動態(tài)生成樣式，使樣式表更加靈活。這樣，我們可以輕松地切換不同的主題樣式或根據(jù)其他條件動態(tài)調(diào)整樣式，從而實現(xiàn)更好的樣式定制和靈活性。

8. 內(nèi)置函數(shù)

Stylus 內(nèi)置了一些常用函數(shù)，如顏色操作、字符串處理等，可以在樣式表中方便地調(diào)用這些函數(shù)進行樣式計算。

當(dāng)涉及到 Stylus 的內(nèi)置函數(shù)時，以下是一個代碼案例來展示如何在樣式表中使用內(nèi)置函數(shù)進行樣式計算：

// 使用顏色操作函數(shù)
$primary-color = #ff0000

.container
  background-color $primary-color
  color darken($primary-color, 20%)

.button
  background-color lighten($primary-color, 10%)
  border-color rgba($primary-color, 0.5)
  box-shadow 0 0 10px mix($primary-color, #000, 50%)

// 使用字符串處理函數(shù)
$text = 'Hello, World!'

.heading
  font-size 20px
  text-transform uppercase
  content "'" + $text + "'"
  padding-left str-length($text) * 10px

在這個例子中，我們首先定義了一個名為 $primary-color 的變量，并將其設(shè)置為紅色 #ff0000。

然后，我們使用顏色操作函數(shù)來計算樣式。在 .container 類選擇器中，我們將背景顏色設(shè)置為 $primary-color，并將文字顏色設(shè)置為變暗了 20% 的顏色。

在 .button 類選擇器中，我們將背景顏色設(shè)置為比 $primary-color 變亮了 10% 的顏色，將邊框顏色設(shè)置為帶有 50% 不透明度的 $primary-color。我們還使用 mix() 函數(shù)創(chuàng)建了一個混合的陰影效果，將 $primary-color 和黑色 #000 混合，透明度為 50%，然后應(yīng)用了一個帶有10像素模糊的陰影。

在樣式表中，我們還使用字符串處理函數(shù)來操作文本。在 .heading 類選擇器中，我們設(shè)置了字體大小為 20px，將文本轉(zhuǎn)換為大寫，并使用 str-length() 函數(shù)來計算文本長度，并在左邊添加相應(yīng)數(shù)量的 padding（每個字符對應(yīng) 10 像素的 padding）。

通過使用內(nèi)置函數(shù)，我們可以方便地進行顏色操作、字符串處理等樣式計算，使樣式表更加靈活和動態(tài)。這樣，我們可以根據(jù)需要對顏色、文本等進行運算和處理，實現(xiàn)更精細(xì)的樣式定制。

9. 可擴展性

Stylus 支持插件機制，可以通過插件擴展其功能，如自動添加瀏覽器前綴、使用 CSS3 新特性等。
當(dāng)涉及到 Stylus 的插件機制時，以下是一個代碼案例來展示如何使用插件擴展 Stylus 的功能：

首先，在項目的根目錄下創(chuàng)建一個 package.json 文件，并添加對 Stylus 的依賴：

{
  "dependencies": {
    "stylus": "^0.54.8",
    "autoprefixer-stylus": "^1.0.0"
  }
}

然后，在根目錄下運行 npm install 命令來安裝依賴。

接下來，創(chuàng)建一個樣式文件（例如 styles.styl），并寫入以下代碼：

@import 'autoprefixer-stylus'

.button
  display flex
  justify-content center
  align-items center

.prefixer()

在這個例子中，我們使用了 autoprefixer-stylus 插件來自動添加瀏覽器前綴。首先，我們使用 @import 導(dǎo)入了 autoprefixer-stylus 插件。然后，在 .button 類選擇器內(nèi)部，我們設(shè)置了一些基本的 flex 布局樣式。

最后，我們調(diào)用了 prefixer() 函數(shù)，該函數(shù)會自動為樣式中的屬性添加瀏覽器前綴。根據(jù)插件的要求，我們在樣式文件中調(diào)用該函數(shù)來觸發(fā)插件的處理。

在根目錄下運行 npx stylus styles.styl 命令來編譯樣式文件。編譯完成后，將生成一個 styles.css 文件，其中包含經(jīng)過插件處理的樣式。

通過使用插件，我們可以方便地擴展 Stylus 的功能，如自動添加瀏覽器前綴、使用 CSS3 新特性等。這樣，我們可以更高效地編寫樣式，并確保生成的樣式在各種瀏覽器中具有一致的表現(xiàn)。請確保在使用插件時遵循相關(guān)的文檔和要求。

10. 輕量高效

Stylus 的編譯器非常輕量高效，生成的 CSS 代碼也相對精簡，減少了文件大小和加載時間。

當(dāng)涉及到 Stylus 的編譯器時，以下是一個代碼案例來展示如何使用 Stylus 編譯器將 Stylus 代碼轉(zhuǎn)換為 CSS 代碼：

首先，安裝全局的 Stylus 編譯器：

npm install -g stylus

然后，創(chuàng)建一個名為 styles.styl 的文件，并寫入以下內(nèi)容：

$primary-color = #ff0000

.container
  background-color $primary-color
  color rgba($primary-color, 0.8)

.button
  background-color lighten($primary-color, 10%)
  border-color darken($primary-color, 20%)

在這個例子中，我們定義了一個名為 $primary-color 的變量，并將其設(shè)置為紅色 #ff0000。

然后，我們使用該變量 $primary-color 設(shè)置了 .container 類選擇器的背景顏色，并使用 rgba() 函數(shù)將其顏色值設(shè)置為透明度為 0.8 的顏色。

接下來，在 .button 類選擇器中，我們使用內(nèi)置的顏色操作函數(shù) lighten() 和 darken() 來分別調(diào)整 $primary-color 的亮度。我們將背景顏色設(shè)置為比 $primary-color 變亮了 10% 的顏色，并將邊框顏色設(shè)置為比 $primary-color 變暗了 20% 的顏色。

最后，在終端中運行以下命令來編譯 Stylus 代碼并生成 CSS 文件：

stylus styles.styl

編譯完成后，將生成一個名為 styles.css 的文件，其中包含轉(zhuǎn)換后的 CSS 代碼。

通過使用 Stylus 編譯器，我們可以輕松地將 Stylus 代碼轉(zhuǎn)換為精簡的 CSS 代碼。這樣可以減少 CSS 文件的大小，提高網(wǎng)頁加載的性能和效率。同時，Stylus 提供了豐富的功能和語法，使得樣式表的編寫更加簡潔、靈活和可維護。

這些特點使得 Stylus 成為一個受歡迎的 CSS 預(yù)處理器，它能夠顯著提高開發(fā)效率，并且讓樣式表更加模塊化、可維護和可擴展。

附錄：前后端實戰(zhàn)項目（簡歷必備） 推薦：★★★★★

Vue.js 和 Egg.js 開發(fā)企業(yè)級健康管理項目
帶你從入門到實戰(zhàn)全面掌握 uni-app文章來源地址http://www.zghlxwxcb.cn/news/detail-528109.html

到了這里，關(guān)于擁抱簡潔：探索Stylus的簡潔語法與CSS預(yù)處理器之美的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！