Theming mit Sass: Ein SCSS-Tutorial
Veröffentlicht: 2022-03-11Die Stylesheet-Entwicklung mit Sass spart wertvolle Zeit und erleichtert Front-End-Entwicklern das Leben, selbst wenn die grundlegendsten Funktionen wie das Verschachteln von Eigenschaften oder Variablen verwendet werden. Es ist nicht verwunderlich, dass CSS-Präprozessoren weithin als De-facto-Methode zum Erstellen von Stilen für Websites und Anwendungen übernommen wurden. wir können einfach nicht mehr ohne sie leben.
Wenn es um Themen geht; Das heißt, das Aussehen und Verhalten Ihrer Website zu ändern, während das Layout beibehalten wird, Sass-Features – wie Mixins oder Funktionen – können sich anfühlen, als würden Sie ein Flugzeug nehmen, anstatt zu Fuß zu gehen! In diesem SCSS-Tutorial erstellen wir ein minimales Design und verwenden SCSS, um unserer CSS-Programmierung einige Superkräfte zu verleihen.
Ein grundlegender Mixin-Ansatz
Nehmen wir an, wir haben das folgende Layout:
<body class="theme-1"> <div class="container"> <div class="left"> Left </div> <div class="right"> Right <button class="button">Button</button> </div> </div> </body> </html> Wir wurden gebeten, mehrere Themen dafür zu erstellen. Das Thema muss die Farben für alle Container (einschließlich des Hauptcontainers) und der Schaltfläche ändern, und das Thema wird durch eine Klasse im Körper bestimmt, oder es könnte auch ein „äußerer“ Container sein:
<body class="theme-1">Lassen Sie uns ein Mixin namens „themable“ erstellen, das unser Farbschema als Parameter enthält.
@mixin themable($theme-name, $container-bg, $left-bg, $right-bg, $innertext, $button-bg) { .#{$theme-name} { .container { background-color: $container-bg; border: 1px solid #000; display: flex; height: 500px; justify-content: space-between; margin: 0 auto; padding: 1em; width: 50%; * { color: $innertext; font-size: 2rem; } .left { background-color: $left-bg; height: 100%; width: 69%; } .right { background-color: $right-bg; height: 100%; position: relative; width: 29%; } .button { background-color: $button-bg; border: 0; border-radius: 10px; bottom: 10px; cursor: pointer; font-size: 1rem; font-weight: bold; padding: 1em 2em; position: absolute; right: 10px; } } } }Verwenden Sie es dann, um unsere Themen zu generieren:
@include themable(theme-1, #f7eb80, #497265, #82aa91, #fff, #bc6a49); @include themable(theme-2, #e4ada7, #d88880, #cc6359, #fff, #481b16); An dieser Stelle haben wir bereits viel Zeit gespart, aber es gibt einige Probleme mit diesem Ansatz:
Designs haben normalerweise viele andere Eigenschaften neben Farben. Wenn wir beispielsweise das Bootstrap-Theme ändern wollten, wäre das Schreiben eines Mixins nach dem vorherigen „Rezept“ schwer zu warten und der Code schwer zu lesen. Außerdem folgen wir nicht wirklich den Best Practices von Sass – zum Beispiel geben wir Hex-Farbcodes direkt in das Mixin ein.
Entwerfen Sie ein Stilschema mit Sass Maps
Mit Hilfe von Maps, die hauptsächlich wie Schlüssel-indizierte Arrays sind, können wir einen semantischeren, aussagekräftigeren Stilsatz für unser Thema erstellen, der für unsere Entwicklerkollegen einfacher zu pflegen und zu verstehen ist. 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 selbsterklärend sind.
Die Karte für unseren neuen Ansatz wird eine verschachtelte Karte sein:
$theme-1: ( container: ( bg: #e4ada7, color: #000, border-color: #000 ), left: ( bg: #d88880, color: #fff, height: 100%, width: 69% ), right: ( bg: #cc6359, color: #fff, height: 100%, width: 29% ), button: ( bg: #481b16, color: #fff ) ); Wenn wir auf jeden Abschnitt unseres Schemas theme-1 und seine Unterkarten zugreifen möchten, verwenden wir die Direktive @each , um jede 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 Map zurück, die diesem Schlüssel entspricht.
Dann können wir mit der Funktion map-get auf die Eigenschaften jeder Karte zugreifen, sagen wir die Eigenschaft background (bg):
map-get($map, bg)Wenn wir schließlich unser neues Mixin basierend auf unserer Kartenstruktur kombinieren, können wir so viele Themen erstellen, wie wir möchten:
@mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container { .left, .right { font-size: 2rem; } } .container .right { position: relative } .button { border: 0; border-radius: 10px; bottom: 10px; cursor: pointer; font-size: 1rem; font-weight: bold; padding: 1em 2em; position: absolute; right: 10px; } // Loop through each of the keys (sections) @each $section, $map in $theme-map { @if ($section == container) { .container { background-color: map-get($map, bg); border: 1px solid map-get($map, border-color); display: flex; height: 500px; justify-content: space-between; margin: 0 auto; padding: 1em; width: 50%; } } @else { .#{$section} { background-color: map-get($map, bg); color: map-get($map, color); @if ($section != button) { height: map-get($map, height); width: map-get($map, width); } } } } } } @include themable(theme-1, $theme-1); @include themable(theme-2, $theme-2); … … Beachten Sie, dass wir auch die Direktive @if verwenden, um Eigenschaften für Abschnitte zu unterscheiden, 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 unterschiedliche Eigenschaften hinzufügen, um bestimmte Eigenschaften oder sogar Regeln zu erstellen, oder wir können mit einer verschachtelten Zuordnung zwischen einem Schlüssel mit einem einzelnen Wert und einem anderen unterscheiden.
Unser Design könnte auch aus vielen Karten bestehen, die von mehreren Mixins verwendet werden und in verschiedenen Teilen unseres Stylesheets angewendet werden. Es hängt alles von der Komplexität unseres Grundlayouts und natürlich von unserem persönlichen Ansatz ab.
Weitere Optimierung
Sass bietet nützliche eingebaute Funktionen, um uns noch mehr Arbeit zu ersparen; zum Beispiel die hsl-Funktionen wie lighten oder darken , um beispielsweise die Farbe eines Buttons zu berechnen, wenn man mit der Maus darüber fährt.
Wir können den Schaltflächencode so ändern, dass der Hintergrund beim Bewegen aufgehellt wird, 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 werden; Jede Themenkarte kann in einem Modul enthalten sein und dann in unser Haupt-Stylesheet 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 daran interessiert sind, mehr über die Verwendung von Sass zum Trocknen Ihres CSS zu erfahren, bespricht Toptaler Justin Brazeau und Sass-Enthusiast genau dies in seinem brillanten Artikel Sass Mixins: Keep Your Stylesheets DRY .