Schlüsselpunkte
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).
Diese Funktion wurde schnell überbeansprucht, um BEM -Selektoren wie sehr beliebte Medienobjekte zu schreiben:
<code>.foo {
// .foo 的样式
&-bar {
// .foo-bar 的样式
}
}</code>Der vorherige Code wird als:
kompiliert<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>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>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>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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
