與SASS結構CSS類選擇器-css教學-PHP中文網

首頁

web前端

css教學

與SASS結構CSS類選擇器

Joseph Gordon-Levitt

Feb 24, 2025 am 10:01 AM

Structuring CSS Class Selectors with Sass

關鍵要點

BEM 和 SMACSS 等 CSS 命名約定嚴重依賴 CSS 類選擇器，而使用 Sass 可以使編寫這些選擇器更模塊化和可重用。
Sass 中的原生選擇器嵌套允許從文檔根級別的原始塊名稱創建子類名稱，從而簡化代碼並減少對變量或 mixin 等額外輔助工具的需求。
BEM mixin 提供了一個友好的 API，一旦您了解 BEM 的工作原理，就很容易理解，儘管邏輯隱藏在 mixin 後面，這可能會使生成新的選擇器和類不那麼明顯。
Humanified-BEM mixin 旨在通過隱藏 Block-Element-Modifier 專業術語來提高代碼的可讀性，但這對於某些開發人員來說可能涉及過多的抽象。

CSS 命名約定有很多。您可能已經了解 BEM 和 SMACSS（後者不僅僅是命名約定）。還有 OOCSS，它更像是一種完整的方法論。它們都嚴重依賴 CSS 類選擇器，因為它們具有很強的可重用性。

使用 Sass 可以幫助以更模塊化的方式編寫這些選擇器。通過選擇器嵌套和 mixin，我們可以提出~~花哨的~~瘋狂的解決方案來構建所需的 API。在本文中，我將（重新）介紹其中幾種方法，列出我認為每種方法的優缺點。

原生選擇器嵌套

為了不必重複原始塊名稱而能夠嵌套選擇器，這在 Sass 中一直是一個長期要求的功能。在 Sass 3.3 版本中，此功能最終已引入。在測試版期間，首先使用非常奇怪的語法，後來在穩定版本上線時更改為更好的語法。 Natalie Weizenbaum 在這篇文章中解釋了更改背後的原因。

基本上，引用選擇器（&）可以用作子類名稱的一部分，以便從文檔的根級別（這意味著此處不需要@at-root）創建第一個類名稱的另一個類名稱。

<code>.foo {
  // .foo 的样式

  &-bar {
    // .foo-bar 的样式
  }
}</code>

此功能很快就被過度使用來編寫 BEM 選擇器，例如非常流行的媒體對象：

<code>.media {
  // .media 块的样式

  &__img {
    // .media__image 元素的样式

    &--full {
      // .media__image--full 修改后的元素的样式
    }
  }

  &--new {
    // .media--new 修饰符的样式
  }
}</code>

之前的代碼將編譯為：

<code>.media {}
.media__img {}
.media__img--full {}
.media--new {}</code>

優點

它依賴於原生功能，不需要額外的輔助工具，例如變量或 mixin。
一旦您了解引用選擇器（&）的工作原理，總體上就很容易掌握。

缺點

它公開了 & 語法，如果對於不熟悉 Sass 的開發人員來說，這可能會稍微令人困惑，甚至令人恐懼。
除非使用 @at-root，否則嵌套通常不會在根目錄打印，這可能會令人不安。

BEM mixin

因為在Sass 3.3 的測試版期間類生成的語法非常難看（@at-root #{&}__element），我們很快就在這里和那裡看到了一些mixin 來隱藏痛苦並提供更友好的API 。

<code>.foo {
  // .foo 的样式

  &-bar {
    // .foo-bar 的样式
  }
}</code>

您可以像這樣使用它們：

<code>.media {
  // .media 块的样式

  &__img {
    // .media__image 元素的样式

    &--full {
      // .media__image--full 修改后的元素的样式
    }
  }

  &--new {
    // .media--new 修饰符的样式
  }
}</code>

我們也可以以同樣的方式創建一個塊 mixin，但它不會像塊那樣有用，因為塊只是一個類名稱。讓我們保持簡單。儘管對於某些人來說，修飾符和元素似乎太長了，所以我們看到一些 e 和 m 在盛開。

<code>.media {}
.media__img {}
.media__img--full {}
.media--new {}</code>

優點

此版本提供了一個友好的 API，一旦您了解 BEM 的工作原理，就很容易理解。

缺點

邏輯隱藏在 mixin 後面，除非您明確知道發生了什麼，否則生成新的選擇器和類並不那麼明顯。
單個字母 mixin 可能不是一個好主意，因為它們使理解 mixin 的用途變得困難。 b 和 m 可以表示很多東西。

Humanified-BEM mixin

最近，我閱讀了 Anders Schmidt Hansen 的一種新的類似 BEM 的方法。其思想是將 Block-Element-Modifier 專業術語隱藏在朗讀時有意義的常用詞彙後面。

<code>@mixin element($element) {
  &__#{$element} {
    @content;
  }
}

@mixin modifier($modifier) {
  &--#{$modifier} {
    @content;
  }
}</code>

在這種情況下，重點是將代碼隱藏在精心命名的 mixin 後面，以便代碼看起來像是在講述一個故事，因此新的 mixin 實際上很有用。

<code>.media {
  // .media 块的样式

  @include element("image") {
    // .media__image 元素的样式

    @include modifier("full") {
      // .media__image--full 修改后的元素的样式
    }
  }

  @include modifier("new") {
    // .media--new 修饰符的样式
  }
}</code>

Anders 進一步使用 is(..) 和 holds(..) mixin。整個想法讓我想起了我的 when-inside(..) mixin，當根據其上級上下文設置元素樣式時，它將 & 隱藏在一個用戶友好的 mixin 後面。

<code>.media {
  // .media 块的样式

  @include e("image") {
    // .media__image 元素的样式

    @include m("full") {
      // .media__image--full 修改后的元素的样式
    }
  }

  @include m("new") {
    // .media--new 修饰符的样式
  }
}</code>

優點

這種方法有助於提高代碼的可讀性，就像我們開始使用前導 is-（由 SMACSS 推廣）為我們的狀態類命名一樣。
仍然堅持特定方法（在本例中為 BEM），但使其更易於開發人員使用。

缺點

更多的 mixin、更多的輔助工具、更多的東西需要學習，才能獲得更穩定的學習曲線。並非每個人都喜歡處理大量的 mixin 來編寫諸如 CSS 選擇器之類的簡單內容。
這對於某些人來說可能過於抽象；並非每個人都喜歡像閱讀英語一樣閱讀代碼。這取決於情況。

最終想法

請記住，使用任何這些技術都會阻止選擇器代碼庫可搜索，因為選擇器在由 Sass 生成之前實際上並不存在。在選擇器之前添加註釋可以解決這個問題，但為什麼不一開始就直接編寫選擇器呢？

如果您關心擁有可搜索的代碼庫，請不要使用新的 Sass 功能來 BEM 化所有選擇器（.b { &__e { } }）。

— Kaelig (@kaelig) 2014 年 3 月 12 日

無論如何，朋友們，以下是我知道的用 Sass 編寫 CSS 選擇器最流行的方法，在我和你之間，我不喜歡它們。而且不僅僅是因為搜索問題，對我來說這並不是什麼大問題。

我可以看出他們試圖解決的問題，但有時簡單勝過 DRY。重複根選擇器並不是什麼大問題，它不僅使代碼更易於閱讀，因為嵌套較少，而且更接近 CSS。

有時簡單勝過 DRY。

— Hugo Giraudel (@HugoGiraudel) 2015 年 5 月 19 日

關於使用 SASS 結構化 CSS 類選擇器的常見問題

使用 SASS 結構化 CSS 類選擇器的意義是什麼？

使用 SASS 結構化 CSS 類選擇器對於維護乾淨、有序和高效的樣式表至關重要。 SASS（代表 Syntactically Awesome Stylesheets）是一種 CSS 預處理器，允許開發人員使用變量、嵌套規則、mixin 和函數，使 CSS 更具動態性和可重用性。通過結構化類選擇器，您可以創建樣式層次結構，從而更容易理解不同元素及其樣式之間的關係。這可以極大地提高 CSS 代碼的可維護性和可擴展性。

如何在 SASS 中使用通配符選擇器？

通配符選擇器，也稱為通用選擇器，可以在 SASS 中用於選擇與特定模式匹配的任何元素。例如，您可以使用通配符選擇器“*”來選擇所有元素。但是，SASS 不直接支持通配符類名。如果您想選擇類名以特定字符串開頭的元素，則需要使用變通方法，例如使用屬性選擇器。例如，您可以使用選擇器[class^="prefix-"]來選擇所有類名以“prefix-”開頭的元素。

我可以在 SASS 中使用 @extend 指令與類選擇器嗎？

是的，@extend 指令可以在 SASS 中與類選擇器一起使用。 @extend 指令允許一個選擇器繼承另一個選擇器的樣式。這對於減少 CSS 代碼中的冗餘非常有用。例如，如果您有兩個類共享許多相同的樣式，則可以在一個類中定義這些樣式，然後使用 @extend 指令將這些樣式應用於另一個類。

如何使用 SASS 更有效地組織 CSS 代碼？

SASS 提供了一些功能，可以幫助您更有效地組織 CSS 代碼。其中一項功能是嵌套，它允許您將 CSS 選擇器嵌套在其他選擇器中，從而反映 HTML 結構。這可以使您的 CSS 代碼更易於閱讀和維護。另一個功能是變量，它允許您定義可重用的值。這對於維護樣式的一致性（例如顏色、字體和間距）非常有用。

使用 SASS 結構化 CSS 類選擇器的最佳實踐是什麼？

使用 SASS 結構化 CSS 類選擇器有幾種最佳實踐。一種最佳實踐是使選擇器盡可能具體。這可以幫助防止樣式意外影響其他元素。另一種最佳實踐是使用有意義的類名來描述元素的目的或功能。這可以使您的 CSS 代碼更易於閱讀和維護。此外，最好對您的類使用一致的命名約定，例如 BEM（塊、元素、修飾符），以便更容易理解不同類之間的關係。

如何在 SASS 中使用 mixin 重用 CSS 代碼？

SASS 中的 mixin 是一種定義可以在整個樣式表中重用的樣式的方法。 mixin 使用 @mixin 指令定義，後跟名稱和 CSS 代碼塊。然後，您可以使用 @include 指令（後跟 mixin 的名稱）在任何選擇器中包含 mixin。這對於減少 CSS 代碼中的冗餘並使其更易於維護非常有用。