Stylesheet Entwicklung mit Sass, auch wenn seine grundlegendsten Funktionen, wie Verschachtelung Eigenschaften oder Variablen, spart wertvolle Zeit und macht das Leben einfacher für Front-End-Entwickler. Es ist nicht verwunderlich, dass CSS-Vorprozessoren als De-facto-Methode zum Erstellen von Stilen für Websites und Anwendungen weit verbreitet sind; Wir können einfach nicht mehr ohne sie leben.,
Wenn es um Thematisierung geht; Das heißt, das Erscheinungsbild Ihrer Website zu ändern und gleichzeitig das Layout beizubehalten, können Sass ‚ Funktionen-wie Mixins oder Funktionen-das Gefühl haben, ein Flugzeug zu nehmen, anstatt zu gehen! In diesem SCSS-Tutorial werden wir ein minimales Thema erstellen und SCSS verwenden, um unserer CSS-Programmierung einige Superkräfte zu verleihen.
Ein grundlegender Mixin-Ansatz
Angenommen, wir haben das folgende Layout:
Wir wurden gebeten, mehrere Themen dafür zu erstellen., Das Thema muss die Farben für alle Container (einschließlich des Hauptcontainers) und die Schaltfläche ändern, und das Thema wird von einer Klasse im Hauptteil bestimmt, oder es könnte sich auch um einen „äußeren“ Container handeln:
<body class="theme-1">Lassen Sie uns ein Mixin namens „themable“ erstellen, das unser Farbschema als Parameter enthält.,
Dann verwenden Sie es, um unsere Themen zu generieren:
@include themable(theme-1, #f7eb80, #497265, #82aa91, #fff, #bc6a49);@include themable(theme-2, #e4ada7, #d88880, #cc6359, #fff, #481b16);Zu diesem Zeitpunkt haben wir bereits viel Zeit gespart, aber es gibt einige Probleme mit diesem Ansatz:
Themen haben normalerweise viele verschiedene Eigenschaften neben Farben. Wenn wir beispielsweise das Bootstrap-Thema ändern möchten, ist das Schreiben eines Mixins nach dem vorherigen „Rezept“ schwer zu pflegen und der Code schwer zu lesen. Außerdem befolgen wir nicht wirklich die Best Practices von Sass—zum Beispiel die Eingabe von Hex-Farbcodes direkt in das Mixin.,
Entwerfen Sie ein Stilschema mit Sass Maps
Mit Hilfe von Karten, die hauptsächlich wie schlüsselindizierte Arrays sind, können wir einen semantischeren, aussagekräftigeren Satz von Stilen für unser Thema erstellen, der von unseren Kollegen leichter zu pflegen und zu verstehen ist Entwickler. Wir könnten auch Listen verwenden, aber ich persönlich finde Karten für diesen Zweck besser geeignet. Listen haben keine Schlüssel, während Schlüssel selbst erklärbar sind.,
Die Karte für unseren neuen Ansatz ist eine verschachtelte Karte:
Wenn wir auf jeden Abschnitt unseres Schemas zugreifen möchten theme-1 und seine Unterkarten verwenden wir die @each-Direktive, um jeden von ihnen zu durchlaufen:
@each $section, $map in $theme-1$section gibt den Schlüssel des aktuellen Abschnitts zurück und $map gibt die verschachtelte Zuordnung zurück, die diesem Schlüssel entspricht.,
Dann können wir über die map-get – Funktion auf die Eigenschaften jeder Karte zugreifen:
map-get($map, bg)Schließlich können wir durch die Kombination unseres neuen Mixins basierend auf unserer Kartenstruktur so viele Themen erstellen, wie wir möchten:
Beachten Sie, dass wir auch die@if direktive zum Unterscheiden von Eigenschaften für Abschnitte, die keine Schaltflächen sind.,
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); }Auf diese Weise können wir für einige Abschnitte verschiedene Eigenschaften hinzufügen, um bestimmte Eigenschaften oder sogar Regeln zu erstellen, oder wir können zwischen einem Schlüssel mit einem einzelnen Wert unterscheiden von einem anderen mit einer verschachtelten Zuordnung.
Unser Thema könnte auch aus vielen Karten bestehen, die von mehreren Mixins verwendet werden und in verschiedenen Teilen unseres Stylesheets angewendet werden. Alles hängt von der Komplexität unseres Grundlayouts und natürlich von unserem persönlichen Ansatz ab.,
Weitere Optimierung
Sass bietet nützliche integrierte Funktionen, um uns noch mehr Arbeit zu ersparen; zum Beispiel die hsl-Funktionen wie lighten oder darken, um beispielsweise die Farbe einer Schaltfläche zu berechnen, wenn Sie mit der Maus darüber fahren.
Wir können den Schaltflächencode ändern, um den Hintergrund beim Schweben aufzuhellen, unabhängig von der ursprünglichen Hintergrundfarbe. Auf diese Weise müssen wir für diesen Zustand keine weitere Farbe hinzufügen.,
@if ($section != button) { height: map-get($map, height); width: map-get($map, width);} @else { &:hover { background-color: lighten(map-get($map, bg), 20%); }}Außerdem kann unser Code durch die Verwendung von Sass-Modulen noch lesbarer und skalierbarer sein; Jede Themenkarte kann in einem Modul enthalten und dann in unser Hauptstylesheet importiert werden.
@import 'theme-1';@import 'theme-2';@import 'theme-3';… … @mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container {… … Dies würde erfordern, dass die Module wie folgt im Projekt platziert werden:
/├── _theme-1.scss├── _theme-2.scss└── _theme-2.scss
Wenn Sie mehr über die Verwendung von Sass zum TROCKNEN Ihres CSS erfahren möchten, diskutieren Toptaler Justin Brazeau und Sass-Enthusiast genau dies in seinem brillanten Artikel Sass Mixins: Halten Sie Ihre Stylesheets TROCKEN.