Da immer mehr Entwickler SASS verwenden, müssen wir auf die Anzahl der SASS-Codes achten. Wir können von der Syntax von CSS (Cascading Style Sheets) ausgehen, um einige der Besonderheiten der SASS-Syntax zu erklären. Schließlich sind CSS-Styleguides sehr verbreitet.
In diesem Artikel werden hauptsächlich einige Funktionen vorgestellt, die mich persönlich interessieren. Möglicherweise können Sie davon profitieren und Ihre eigenen SASS-Nutzungshandbücher erstellen.
Behalten Sie weiterhin Ihre gewohnten CSS-Formatierungsregeln und Styleguides bei
Dieser Artikel konzentriert sich auf die Diskussion einiger Inhalte zu SASS, aber auf dieser Grundlage sollten Entwickler ihre bestehenden und guten Formatierungsregeln beibehalten. Wenn Sie noch keine eigenen Formatierungsregeln entwickelt haben, finden Sie hier einen Überblick über einige Styleguides, die Ihnen bei der Entwicklung Ihrer eigenen CSS-Schreibgewohnheiten helfen sollen. Hier sind nur einige der enthaltenen Dinge:
1. Halten Sie den Zeileneinzug konsistent
2. Halten Sie die Anzahl der Leerzeichen vor und nach dem Doppelpunkt/den Klammern konsistent
3. Behalten Sie einen Selektor pro Zeile und eine Regel pro Zeile bei
4. Versuchen Sie es Schreiben Sie relevante Attribute in Together
5. Erstellen Sie einen Plan für Benennungsregeln für Klassennamen
6. Vermeiden Sie die Verwendung von CSS-ID-Selektoren
7. Warten Sie
Als nächstes lernen wir, wie man schönen SASS-Code schreibt, am Beispiel des Schreibens einer Eigenschaft der .weather-Klasse:
Erste Liste @extend(s)
Auf diese Weise können Entwickler eine klare Vorstellung behalten, die Beziehung zwischen dieser Klasse und ihren Attributen und anderen Klassen und ihren Attributen sofort erkennen und eine klare Vorstellung von der Attributkonsistenz und der Wiederverwendung von Attributen behalten.
Normaler Stil
CSS-Code
Alle Herstellerpräfixe verwenden @mixins
Das Herstellerpräfix (CSS-Präfix) ist sehr zeitkritisch. Aufgrund von Updates moderner Browser werden diese Präfixe immer seltener verwendet. Sie können sich an diese Änderungen anpassen, indem Sie den Inhalt Ihrer Mixins aktualisieren (oder einige in Ihren Mixins verwendete Bibliotheken werden automatisch aktualisiert). Auch wenn das Mixin nur aus einer Zeile besteht, spielt es keine Rolle.
Verschachteln Sie nicht mehr als 3 Ebenen
Manchmal gibt es zu viel Code für eine Klasse, sodass Sie einen Tag-Selektor verwenden müssen. Möglicherweise müssen Sie eine Klasse sehr genau festlegen, um unnötige Kaskadierung zu vermeiden. Selbst wenn möglich, verwenden Sie „extend“, um einige der Wiederverwendbarkeitsfunktionen in CSS zu nutzen.
Verschachtelter Code sollte 50 Zeilen nicht überschreiten
Wenn die Verschachtelung in SASS mehr als 50 Zeilen umfasst, wird sie möglicherweise nicht vollständig auf einer Seite des Compilers angezeigt, was das Lesen und Verstehen des Codes erschwert. Nesting soll ursprünglich das Denken und die Codeorganisation erleichtern und vereinfachen. Wenn es die Lesbarkeit beeinträchtigt, verschachteln Sie es bitte nicht.
Globale und regionale SASS-Dateisequenzen entsprechen Tabelleninhalten
Mit anderen Worten: Sie haben keinen festen Stil. Entwickler sollten sich daran erinnern, den Stil aller Teile konsistent und ordentlich zu halten.
Listen Sie zuerst die Hersteller-/globalen Bibliotheken auf, dann die benutzerdefinierten Bibliotheken, dann die Modi und schließlich die von jeder Abteilung verwendeten Bibliotheken.
Auf diese Weise sieht das „Verzeichnis“ wie im folgenden Beispiel aus, was auf den ersten Blick klar ist:
Diese Dateien sind wie ein Kompass, die Farben und Mixins erzeugen keinen kompilierten CSS-Code, es handelt sich um reine eigenständige Bibliotheken. Danach wurden Muster eingeführt, um das Umschreiben ohne Spezifitätskonflikte sicherer zu machen.
SASS sinnvoll in mehrere kleine Dateien aufteilen
Daran ist nichts auszusetzen. Wenn die Umstände es zulassen, versuchen Sie, mehrere kleine und präzise Dateien zu verwenden, damit Entwickler bestimmte Dateien finden können, anstatt in mehreren großen Dateien mit langem Code nach der Nadel im Heuhaufen zu suchen.
...
Was ich oft mache, ist, diese Dateien einzeln in einer globalen SCSS-Datei zu referenzieren, anstatt auf eine _header.scss-Datei zu verweisen, und dann einzeln in der _header.scss-Datei auf sie zu verweisen. Dadurch kann die Indizierungszeit verkürzt und die Leseeffizienz verbessert werden.
Sie können Globbing verwenden, wenn zu viele Dateien vorhanden sind und die Importsequenz zu lang ist.
Denken Sie daran, Partials _partial.scss zu nennen
Dies ist eine gängige Bezeichnung für Dateien, die nicht selbst kompiliert werden können. Eine solche Datei hängt bis zu einem gewissen Grad von anderen Dateien ab, sodass es unmöglich ist, die Kompilierung unabhängig abzuschließen. Ich persönlich füge beim lokalen Kompilieren gerne einen Unterstrich vor dem Dateinamen hinzu, z. B. _dropdown-menu.scss
Zeilenzuordnung hinzufügen
Sehen Sie hier, das bedeutet, dass das Entwicklungstool Ihnen die Quelle jeder Regel mitteilen kann, auch wenn es sich um eine importierte Teildatei handelt.
Denken Sie bei der Bereitstellung daran, die optimierten Dateien zu kompilieren
Eine laufende Webseite sollte immer minimales CSS verwenden.
Es ist nicht erforderlich, eine CSS-Datei einzureichen
Es kann einige Zeit dauern, aber es kann sehr schön sein, keine CSS-Dateien im Repository zu haben. Die Kompilierung der Dateien erfolgt zum Zeitpunkt der Bereitstellung. Das Einzige, was Sie sehen können, sind also die wunderschön formatierten Sass-Dateien, die optimiert wurden. Dies macht die Beschreibung von Dateien sehr nützlich. Die Dateibeschreibung wird verwendet, um einige vom Versionsherausgeber vorgenommene Änderungen zu vergleichen. Für bereits optimierte CSS-Dateien sind Dateibeschreibungen grundsätzlich unnötig.
Großzügige Nutzungshinweise
Selten bereuen Leute, Kommentare in ihrem Code hinterlassen zu haben. Unabhängig davon, ob es sich um nützliche oder unauffällige Kommentare handelt, werden sie schließlich gelöscht, wenn sie in eine optimierte CSS-Datei kompiliert werden, ohne dass dem Entwickler zusätzliche Kosten entstehen.
.overlay {
/* Modalitäten sind 6000, Speichernachrichten sind 5500, Header ist 2000 */
Z-Index: 5000;
Apropos Anmerkungen: Möglicherweise müssen Sie auch einige Standardisierungsanpassungen daran vornehmen. In SASS eignet sich „//“ hervorragend zum Hinzufügen von Kommentaren und „//“ erleichtert das Kommentieren und Entfernen von Kommentaren.
Konvertieren Sie einige häufig verwendete Werte und Werte mit besonderer Bedeutung in Variablen
Wenn Sie feststellen, dass Sie einen Wert wiederverwenden (was im Frontend-Design sehr häufig vorkommt), sollten Sie ihn besser in eine Variable umwandeln. Auf diese Weise können Sie sich durch Benennung an die Bedeutung des Werts erinnern und beim Schreiben von Code die Konsistenz wahren. Ja, Sie müssen beim Ändern dieses Werts keine Zeile für Zeile anpassen.
Wenn eine Zahl eine offensichtliche Bedeutung hat, ist die Umwandlung in eine Variable unerlässlich.
Die Funktion der Verschachtelung von Medienbibliotheken in Sass bedeutet, dass 1. Sie keine Selektoren an anderen Stellen neu schreiben müssen und unnötige Fehler verursachen. 2. Die Regeln, die Sie neu schreiben, werden klar und deutlich, und wenn diese verwendet werden, kann dies sehr verwirrend sein wenn sich der Code am Ende Ihres CSS-Codes oder in anderen Dateien befindet.
CSS-Code
Inhalt in die Zwischenablage kopieren
CSS-Code
Sass wird nichts tun, was Sie ihm nicht sagen, daher ist die endgültige Ausgabe der Sass-Datei für jeden unterschiedlich. Das Schreiben von CSS-Dateien mit Sass ist, als würde man Sass nicht verwenden, Sie sind der Anführer des Codes.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
