Schlüsselpunkte

• CSS -Namenskonventionen wie BEM und SMACSS stützen sich stark von CSS -Klassenauswahlern, und die Verwendung von SASS kann das Schreiben dieser Selektoren modularer und wiederverwendbarer machen.
• Native Selektornisting in SASS erm?glicht die Erstellung von Unterklassennamen aus ursprünglichen Blocknamen auf der Stammebene des Dokuments, vereinfachte Code und die Reduzierung der Notwendigkeit zus?tzlicher Helfer wie Variablen oder Mixin.
• BEM Mixin bietet eine freundliche API, die leicht zu verstehen ist, sobald Sie verstehen, wie BEM funktioniert, obwohl die Logik hinter Mixin versteckt ist, was m?glicherweise neue Selektoren und Klassen weniger offensichtlich macht.
• Humanified-Bem-Mixin soll die Code-Lesbarkeit verbessern, indem die Terminologie der Blockelementmodifikator versteckt ist. Dies kann jedoch für einige Entwickler zu viel Abstraktion beinhalten.

Es gibt viele CSS -Namenskonventionen. M?glicherweise wissen Sie bereits über BEM und SMACSS (letzteres ist mehr als nur die Benennung von Konventionen). Und OOCSS, was eher einer vollst?ndigen Methodik ?hnelt. Sie alle verlassen sich stark auf CSS -Klassenauswahler, weil sie sehr wiederverwendbar sind.

Die Verwendung von SASS kann helfen, diese Selektoren modularer zu schreiben. Mit Selektornist und Mixin k?nnen wir ausgefallene verrückte L?sungen finden, um die erforderliche API aufzubauen. In diesem Artikel werde ich (neu) einige dieser Methoden einführen und die Vor- und Nachteile jedes einzelnen, denke ich, auflistet.

In der Lage sein, Selektoren zu nisten, ohne den ursprünglichen Blocknamen wiederholen zu müssen, war eine langfristige Anforderung bei SASS. In SASS 3.3 wurde diese Funktion schlie?lich eingeführt. W?hrend der Beta wurde zuerst eine sehr seltsame Syntax verwendet und sp?ter zu einer besseren Syntax verwandelt, als die stabile Version live ging. Natalie Weizenbaum erkl?rt die Gründe für die ?nderungen in diesem Beitrag.

Grunds?tzlich kann der Referenzauswahl (&) als Teil des Unterklassennamens verwendet werden, um eine andere Klasse mit dem ersten Klassennamen aus der Stammebene des Dokuments zu erstellen (was bedeutet, dass hier nicht erforderlich ist).

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

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

Der vorherige Code wird als:

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

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

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

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

pros

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

Es stützt sich auf native Funktionen und erfordert keine zus?tzlichen Helfer wie Variablen oder Mixins.

Sobald Sie verstanden haben, wie der Referenzauswahl (&) funktioniert, ist es einfach, insgesamt zu meistern.
• Nachteile

Es enthüllt die & Syntax, die etwas verwirrend und sogar erschreckend sein kann, wenn es Entwicklern, die mit SASS vertraut sind, nicht vertraut ist.

Nesting wird normalerweise nicht im Stammverzeichnis gedruckt, es sei denn, @at-Root wird verwendet, was st?ren kann.
BEM -Mixin

Da die von der Klasse w?hrend des Beta von SASS 3.3 generierte Syntax sehr h?sslich war (@at-Root #{&} __ Element), haben wir bald einige Mischungen hier und da gesehen, um den Schmerz zu verbergen und eine freundlichere API zu liefern.

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

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

Sie k?nnen sie so verwenden:

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

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

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

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

Wir k?nnen auch ein Blockmixin auf die gleiche Weise erstellen, aber es ist nicht so nützlich wie ein Block, da der Block nur ein Klassenname ist. Lassen Sie es uns einfach halten. Obwohl für einige, Modifikatoren und Elemente zu lang zu sein, sehen wir einige E und M in voller Blüte.

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

pros

• Diese Version bietet eine freundliche API, die leicht zu verstehen ist, sobald Sie verstehen, wie BEM funktioniert.

Nachteile

• Logistik sind hinter Mixin versteckt, und das Erzeugen neuer Selektoren und Klassen ist nicht so offensichtlich, es sei denn, Sie wissen genau, was vor sich geht.
• einzelne Buchstabenmixins sind m?glicherweise keine gute Idee, da sie es schwierig machen, zu verstehen, wofür Mixins verwendet werden. B und M k?nnen viele Dinge darstellen.

humanifiziertes Bem-Mixin

Vor kurzem habe ich einen neuen BEM-?hnlichen Ansatz von Anders Schmidt Hansen gelesen. Die Idee ist, den Blockelementmodifikator-Begriff hinter gemeinsamen W?rtern zu verbergen, die beim Vorlesen sinnvoll sind.

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

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

In diesem Fall geht es darum, den Code hinter einem gut benannten Mixin so zu verbergen, dass der Code so aussieht, als ob er eine Geschichte erz?hlt, sodass das neue Mixin tats?chlich nützlich ist.

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

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

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

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

Anders wird weiter verwendet (..) und h?lt (..) Mixin. Die ganze Idee erinnert mich an mein When-Inside-Mixin (..), das sich versteckt und hinter einem benutzerfreundlichen Mixin nach dem Element nach seinem überlegenen Kontext stilft.

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

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

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

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

pros

• Dieser Ansatz verbessert die Lesbarkeit des Codes, genau wie wir mit dem Hauptklassen mit dem führenden IS- (von SMACSS gef?rdert) begonnen haben.
• Halten Sie sich immer noch an einen bestimmten Ansatz (BEM in diesem Fall), erleichtert den Entwicklern jedoch einfacher zu verwenden.

Nachteile

• mehr Mixins, mehr Hilfswerkzeuge und mehr Lerngüter, um eine stabilere Lernkurve zu erhalten. Nicht jeder kümmert sich gerne mit vielen Mixins, um einfache Dinge wie CSS -Selektoren zu schreiben.
• Dies kann für manche Menschen zu abstrakt sein. Es h?ngt von der Situation ab.

Endgültige Gedanken

Denken Sie daran, dass die Verwendung einer dieser Techniken verhindert, dass die Auswahlcode -Basis durchsucht werden kann, da der Selektor nicht tats?chlich existiert, bevor er von SASS generiert wird. Hinzufügen von Kommentaren, bevor Selektoren dieses Problem l?sen k?nnen, aber warum nicht einfach die Selektoren von Anfang an schreiben?

Wenn Sie eine durchsuchbare Codebasis haben, verwenden Sie bitte die neue SASS -Funktion nicht, um alle Selektoren zu beklagen (.b {& __ e {}}).

- Kaelig (@kaelig) 12. M?rz 2014

Wie auch immer, Freunde, hier sind die beliebtesten Methoden, die ich kenne, um CSS -Selektoren in Sass zu schreiben, zwischen mir und dir, ich mag sie nicht. Und es ist nicht nur wegen des Suchproblems, es ist kein gro?es Problem für mich.

Ich kann das Problem sehen, das sie zu l?sen versuchen, aber manchmal überwiegt die Einfachheit trocken. Das Wiederholen des Root -Selektors ist keine gro?e Sache, sondern macht den Code nicht nur leichter zu lesen, da er weniger verschachtelt ist, sondern auch n?her an CSS.

manchmal einfacher als trocken.

- Hugo Giraudel (@hugogiraudel) 19. Mai 2015

FAQs über die Verwendung von SASS -strukturierten CSS -Klassen -Selektoren

Was bedeutet die Verwendung von SASS -strukturierten CSS -Klasse -Selektoren?

Die Verwendung von SASS -strukturierten CSS -Klassenauswahlern ist für die Aufrechterhaltung eines sauberen, geordneten und effizienten Stylesheetes unerl?sslich. SASS (im Namen von Syntacly Awesome Stylesheets) ist ein CSS -Pr?prozessor, mit dem Entwickler Variablen, verschachtelte Regeln, Mixins und Funktionen verwenden k?nnen, um CSS dynamischer und wiederverwendbarer zu gestalten. Mit einem strukturierten Klassenauswahl k?nnen Sie Stilhierarchien erstellen und erleichtern, die Beziehung zwischen verschiedenen Elementen und ihren Stilen zu verstehen. Dies kann die Wartbarkeit und Skalierbarkeit von CSS -Code erheblich verbessern.

Wie kann man Wildcard -Selektor in SASS verwenden?

Wildcard -Selektor, auch als universeller Selektor bezeichnet, kann in SASS verwendet werden, um jedes Element auszuw?hlen, das einem bestimmten Muster entspricht. Beispielsweise k?nnen Sie den Wildcard -Selektor "*" verwenden, um alle Elemente auszuw?hlen. Sass unterstützt jedoch keine direkten Wildcard -Klassennamen. Wenn Sie ein Element ausw?hlen m?chten, dessen Klassenname mit einer bestimmten Zeichenfolge beginnt, müssen Sie eine Problemumgehung verwenden, z. B. die Verwendung eines Attributausw?hlers. Sie k?nnen beispielsweise den Selektor [class^="prefix-"] verwenden, um alle Elemente auszuw?hlen, deren Klassennamen mit "Pr?fix-" beginnen.

Kann ich die @extend -Richtlinie mit dem Klassenauswahl in SASS verwenden?

Ja, die @extend -Anweisung kann in SASS mit Klassenauswahlern verwendet werden. Die @extend -Anweisung erm?glicht es einem Selektor, den Stil eines anderen Selektors zu erben. Dies ist nützlich, um die Redundanz im CSS -Code zu reduzieren. Wenn Sie beispielsweise zwei Klassen haben, die viele der gleichen Stile teilen, k?nnen Sie diese Stile in einer Klasse definieren und dann die @extend -Anweisung verwenden, um diese Stile auf eine andere Klasse anzuwenden.

Wie organisiere ich den CSS -Code effizienter mit SASS?

SASS bietet einige Funktionen, mit denen Sie Ihren CSS -Code effektiver organisieren k?nnen. Eines der Funktionen ist das Nisting, mit dem Sie CSS -Selektoren in anderen Selektoren nisten und die HTML -Struktur widerspiegeln. Dadurch kann Ihr CSS -Code das Lesen und Verwalten erleichtern. Eine andere Funktion sind Variablen, mit denen Sie wiederverwendbare Werte definieren k?nnen. Dies ist nützlich, um Konsistenz in Stilen wie Farben, Schriftarten und Abstand aufrechtzuerhalten.

Was sind die Best Practices für die Verwendung von SASS -strukturierten CSS -Klassenauswahlern?

Es gibt mehrere Best Practices für die Verwendung von SASS -strukturierten CSS -Klassenauswahlern. Eine bew?hrte Verfahren besteht darin, den Selektor so spezifisch wie m?glich zu gestalten. Dies kann dazu beitragen, dass der Stil versehentlich andere Elemente beeintr?chtigt. Eine weitere Best Practice besteht darin, aussagekr?ftige Klassennamen zu verwenden, um den Zweck oder die Funktion eines Elements zu beschreiben. Dadurch kann Ihr CSS -Code das Lesen und Verwalten erleichtern. Darüber hinaus ist es am besten, eine konsistente Namenskonvention für Ihre Klasse wie BEM (Block, Element, Modifikator) zu verwenden, um die Verst?ndnis der Beziehung zwischen verschiedenen Klassen zu erleichtern.

Wie kann man CSS -Code mit Mixin in SASS wiederverwenden?

Mixin in Sass ist eine M?glichkeit, Stile zu definieren, die im gesamten Stylesheet wiederverwendet werden k?nnen. Mixin wird mit der @Mixin -Anweisung definiert, gefolgt von einem Namen und einem CSS -Codeblock. Sie k?nnen dann Mixin in jedem Selektor mit der @Include -Anweisung (übermittelt mit dem Namen des Mixins) einbeziehen. Dies ist nützlich, um die Redundanz im CSS -Code zu verringern und die Aufrechterhaltung einfacher zu machen.

Kann ich CSS -Code mit Funktionen in SASS generieren?

Ja, SASS unterstützt Funktionen und kann zum Generieren von CSS -Code verwendet werden. Funktionen in SASS werden mit der @Function -Anweisung definiert, gefolgt von einem Namen und einem Codeblock. Die Funktion kann Parameter akzeptieren und einen Wert zurückgeben, der in Ihrem CSS -Code verwendet werden kann. Dies ist nützlich, um komplexe Stile zu erstellen, die von bestimmten Bedingungen oder Berechnungen abh?ngen.

Wie organisiere ich CSS -Code mithilfe der @Import -Anweisung in SASS?

Die @import -Anweisung in SASS kann verwendet werden, um andere SASS -Dateien in SASS -Dateien zu importieren. Dies ist nützlich, um CSS -Code in separate Dateien zu organisieren, die sich jeweils auf einen bestimmten Teil des Website -Stils konzentrieren. Sie k?nnen beispielsweise separate SASS -Dateien für Header -Stile, Fu?zeilenstile und Hauptinhaltsstile erstellen und diese dann alle in die Haupt -SASS -Datei importieren.

Wie kann man den & Operator verwenden, um den übergeordneten Selektor in SASS zu verweisen?

Der & Operator in SASS kann verwendet werden, um den übergeordneten Selektor in verschachtelten Regeln zu verweisen. Dies ist sehr nützlich, um Pseudoklassen oder Pseudo-Elemente-Selektoren zu erstellen. Wenn Sie beispielsweise eine verschachtelte Regel für A: Schwebe in einer .link -Regel haben, k?nnen Sie den & Operator verwenden, um einen Selektor zu erstellen .Link: Hover.

Wie erstelle ich reaktionsschnelle Stile mithilfe der @media -Anweisung in SASS?

Die @Media -Anweisung in SASS kann zum Erstellen von Medienabfragen verwendet werden, sodass Sie verschiedene Stile anwenden k?nnen, basierend auf den Eigenschaften des Ger?ts, das die Seite anzeigt, wie z. B. ihre Breite oder H?he. Dies ist sehr nützlich, um reaktionsschnelle Designs zu erstellen, die zu unterschiedlichen Bildschirmgr??en entsprechen. Sie k?nnen die @media -Anweisung im Selektor nur dann verwenden, um Stile anzuwenden, wenn die Medienabfragekriterien erfüllt sind.

Das obige ist der detaillierte Inhalt vonStrukturieren von CSS -Klassenauswahlern mit SASS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!