關(guān)鍵要點(diǎn)

• BEM 和 SMACSS 等 CSS 命名約定嚴(yán)重依賴 CSS 類選擇器，而使用 Sass 可以使編寫(xiě)這些選擇器更模塊化和可重用。
• Sass 中的原生選擇器嵌套允許從文檔根級(jí)別的原始?jí)K名稱創(chuàng)建子類名稱，從而簡(jiǎn)化代碼并減少對(duì)變量或 mixin 等額外輔助工具的需求。
• BEM mixin 提供了一個(gè)友好的 API，一旦您了解 BEM 的工作原理，就很容易理解，盡管邏輯隱藏在 mixin 后面，這可能會(huì)使生成新的選擇器和類不那么明顯。
• Humanified-BEM mixin 旨在通過(guò)隱藏 Block-Element-Modifier 專業(yè)術(shù)語(yǔ)來(lái)提高代碼的可讀性，但這對(duì)于某些開(kāi)發(fā)人員來(lái)說(shuō)可能涉及過(guò)多的抽象。

CSS 命名約定有很多。您可能已經(jīng)了解 BEM 和 SMACSS（后者不僅僅是命名約定）。還有 OOCSS，它更像是一種完整的方法論。它們都嚴(yán)重依賴 CSS 類選擇器，因?yàn)樗鼈兙哂泻軓?qiáng)的可重用性。

使用 Sass 可以幫助以更模塊化的方式編寫(xiě)這些選擇器。通過(guò)選擇器嵌套和 mixin，我們可以提出花哨的瘋狂的解決方案來(lái)構(gòu)建所需的 API。在本文中，我將（重新）介紹其中幾種方法，列出我認(rèn)為每種方法的優(yōu)缺點(diǎn)。

原生選擇器嵌套

為了不必重復(fù)原始?jí)K名稱而能夠嵌套選擇器，這在 Sass 中一直是一個(gè)長(zhǎng)期要求的功能。在 Sass 3.3 版本中，此功能最終已引入。在測(cè)試版期間，首先使用非常奇怪的語(yǔ)法，后來(lái)在穩(wěn)定版本上線時(shí)更改為更好的語(yǔ)法。Natalie Weizenbaum 在這篇文章中解釋了更改背后的原因。

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

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

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

此功能很快就被過(guò)度使用來(lái)編寫(xiě) BEM 選擇器，例如非常流行的媒體對(duì)象：

<code>.media {
  // .media 塊的樣式

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

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

  &--new {
    // .media--new 修飾符的樣式
  }
}</code>

之前的代碼將編譯為：

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

優(yōu)點(diǎn)

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

缺點(diǎn)

• 它公開(kāi)了 & 語(yǔ)法，如果對(duì)于不熟悉 Sass 的開(kāi)發(fā)人員來(lái)說(shuō)，這可能會(huì)稍微令人困惑，甚至令人恐懼。
• 除非使用 @at-root，否則嵌套通常不會(huì)在根目錄打印，這可能會(huì)令人不安。

BEM mixin

因?yàn)樵?Sass 3.3 的測(cè)試版期間類生成的語(yǔ)法非常難看（@at-root #{&}__element），我們很快就在這里和那里看到了一些 mixin 來(lái)隱藏痛苦并提供更友好的 API。

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

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

您可以像這樣使用它們：

<code>.media {
  // .media 塊的樣式

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

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

  &--new {
    // .media--new 修飾符的樣式
  }
}</code>

我們也可以以同樣的方式創(chuàng)建一個(gè)塊 mixin，但它不會(huì)像塊那樣有用，因?yàn)閴K只是一個(gè)類名稱。讓我們保持簡(jiǎn)單。盡管對(duì)于某些人來(lái)說(shuō)，修飾符和元素似乎太長(zhǎng)了，所以我們看到一些 e 和 m 在盛開(kāi)。

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

優(yōu)點(diǎn)

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

缺點(diǎn)

• 邏輯隱藏在 mixin 后面，除非您明確知道發(fā)生了什么，否則生成新的選擇器和類并不那么明顯。
• 單個(gè)字母 mixin 可能不是一個(gè)好主意，因?yàn)樗鼈兪估斫?mixin 的用途變得困難。b 和 m 可以表示很多東西。

Humanified-BEM mixin

最近，我閱讀了 Anders Schmidt Hansen 的一種新的類似 BEM 的方法。其思想是將 Block-Element-Modifier 專業(yè)術(shù)語(yǔ)隱藏在朗讀時(shí)有意義的常用詞匯后面。

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

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

在這種情況下，重點(diǎn)是將代碼隱藏在精心命名的 mixin 后面，以便代碼看起來(lái)像是在講述一個(gè)故事，因此新的 mixin 實(shí)際上很有用。

<code>.media {
  // .media 塊的樣式

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

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

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

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

<code>.media {
  // .media 塊的樣式

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

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

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

優(yōu)點(diǎn)

• 這種方法有助于提高代碼的可讀性，就像我們開(kāi)始使用前導(dǎo) is-（由 SMACSS 推廣）為我們的狀態(tài)類命名一樣。
• 仍然堅(jiān)持特定方法（在本例中為 BEM），但使其更易于開(kāi)發(fā)人員使用。

缺點(diǎn)

• 更多的 mixin、更多的輔助工具、更多的東西需要學(xué)習(xí)，才能獲得更穩(wěn)定的學(xué)習(xí)曲線。并非每個(gè)人都喜歡處理大量的 mixin 來(lái)編寫(xiě)諸如 CSS 選擇器之類的簡(jiǎn)單內(nèi)容。
• 這對(duì)于某些人來(lái)說(shuō)可能過(guò)于抽象；并非每個(gè)人都喜歡像閱讀英語(yǔ)一樣閱讀代碼。這取決于情況。

最終想法

請(qǐng)記住，使用任何這些技術(shù)都會(huì)阻止選擇器代碼庫(kù)可搜索，因?yàn)檫x擇器在由 Sass 生成之前實(shí)際上并不存在。在選擇器之前添加注釋可以解決這個(gè)問(wèn)題，但為什么不一開(kāi)始就直接編寫(xiě)選擇器呢？

如果您關(guān)心擁有可搜索的代碼庫(kù)，請(qǐng)不要使用新的 Sass 功能來(lái) BEM 化所有選擇器（.b { &__e { } }）。

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

無(wú)論如何，朋友們，以下是我知道的用 Sass 編寫(xiě) CSS 選擇器最流行的方法，在我和你之間，我不喜歡它們。而且不僅僅是因?yàn)樗阉鲉?wèn)題，對(duì)我來(lái)說(shuō)這并不是什么大問(wèn)題。

我可以看出他們?cè)噲D解決的問(wèn)題，但有時(shí)簡(jiǎn)單勝過(guò) DRY。重復(fù)根選擇器并不是什么大問(wèn)題，它不僅使代碼更易于閱讀，因?yàn)榍短纵^少，而且更接近 CSS。

有時(shí)簡(jiǎn)單勝過(guò) DRY。

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

關(guān)于使用 SASS 結(jié)構(gòu)化 CSS 類選擇器的常見(jiàn)問(wèn)題

使用 SASS 結(jié)構(gòu)化 CSS 類選擇器的意義是什么？

使用 SASS 結(jié)構(gòu)化 CSS 類選擇器對(duì)于維護(hù)干凈、有序和高效的樣式表至關(guān)重要。SASS（代表 Syntactically Awesome Stylesheets）是一種 CSS 預(yù)處理器，允許開(kāi)發(fā)人員使用變量、嵌套規(guī)則、mixin 和函數(shù)，使 CSS 更具動(dòng)態(tài)性和可重用性。通過(guò)結(jié)構(gòu)化類選擇器，您可以創(chuàng)建樣式層次結(jié)構(gòu)，從而更容易理解不同元素及其樣式之間的關(guān)系。這可以極大地提高 CSS 代碼的可維護(hù)性和可擴(kuò)展性。

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

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

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

是的，@extend 指令可以在 SASS 中與類選擇器一起使用。@extend 指令允許一個(gè)選擇器繼承另一個(gè)選擇器的樣式。這對(duì)于減少 CSS 代碼中的冗余非常有用。例如，如果您有兩個(gè)類共享許多相同的樣式，則可以在一個(gè)類中定義這些樣式，然后使用 @extend 指令將這些樣式應(yīng)用于另一個(gè)類。

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

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

使用 SASS 結(jié)構(gòu)化 CSS 類選擇器的最佳實(shí)踐是什么？

使用 SASS 結(jié)構(gòu)化 CSS 類選擇器有幾種最佳實(shí)踐。一種最佳實(shí)踐是使選擇器盡可能具體。這可以幫助防止樣式意外影響其他元素。另一種最佳實(shí)踐是使用有意義的類名來(lái)描述元素的目的或功能。這可以使您的 CSS 代碼更易于閱讀和維護(hù)。此外，最好對(duì)您的類使用一致的命名約定，例如 BEM（塊、元素、修飾符），以便更容易理解不同類之間的關(guān)系。

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

SASS 中的 mixin 是一種定義可以在整個(gè)樣式表中重用的樣式的方法。mixin 使用 @mixin 指令定義，后跟名稱和 CSS 代碼塊。然后，您可以使用 @include 指令（后跟 mixin 的名稱）在任何選擇器中包含 mixin。這對(duì)于減少 CSS 代碼中的冗余并使其更易于維護(hù)非常有用。

我可以在 SASS 中使用函數(shù)生成 CSS 代碼嗎？

是的，SASS 支持函數(shù)，可用于生成 CSS 代碼。SASS 中的函數(shù)使用 @function 指令定義，后跟名稱和代碼塊。函數(shù)可以接受參數(shù)，并返回一個(gè)值，該值可以在您的 CSS 代碼中使用。這對(duì)于創(chuàng)建依賴于特定條件或計(jì)算的復(fù)雜樣式非常有用。

如何在 SASS 中使用 @import 指令組織 CSS 代碼？

SASS 中的 @import 指令可用于將其他 SASS 文件導(dǎo)入 SASS 文件。這對(duì)于將 CSS 代碼組織到單獨(dú)的文件中非常有用，每個(gè)文件都專注于網(wǎng)站樣式的特定部分。例如，您可以為頁(yè)眉樣式、頁(yè)腳樣式和主要內(nèi)容樣式創(chuàng)建單獨(dú)的 SASS 文件，然后將它們?nèi)繉?dǎo)入主 SASS 文件。

如何在 SASS 中使用 & 運(yùn)算符引用父選擇器？

SASS 中的 & 運(yùn)算符可用于在嵌套規(guī)則中引用父選擇器。這對(duì)于創(chuàng)建偽類或偽元素選擇器非常有用。例如，如果您有一個(gè)嵌套規(guī)則用于 .link 規(guī)則內(nèi)的 a:hover，則可以使用 & 運(yùn)算符創(chuàng)建選擇器 .link:hover。

如何在 SASS 中使用 @media 指令創(chuàng)建響應(yīng)式樣式？

SASS 中的 @media 指令可用于創(chuàng)建媒體查詢，允許您根據(jù)查看頁(yè)面的設(shè)備的特性（例如其寬度或高度）應(yīng)用不同的樣式。這對(duì)于創(chuàng)建適應(yīng)不同屏幕尺寸的響應(yīng)式設(shè)計(jì)非常有用。您可以將 @media 指令用于選擇器中，僅當(dāng)媒體查詢條件滿足時(shí)才應(yīng)用樣式。

以上是與SASS結(jié)構(gòu)CSS類選擇器的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！