Share
Der Workflow des Frontend-Entwicklers hat sich in den letzten Jahren stark verändert. Mehr Komplexität, höhere Anforderungen und größere Projekte bringen uns zu neuen Technologien wie Vorprozessoren. Ich persönlich liebe meinen Präprozessor-Workflow und möchte Sass heutzutage für meine Projekte nicht mehr missen - ohne ihn wäre ich ein Durcheinander.
Insbesondere in einer Situation, in der Sass mir geholfen hat, ist das Erstellen eines einzigen soliden Frontends, das verschiedene Themen haben kann - das Ändern von Farben, Bildern oder der Schriftarten mit Leichtigkeit. Heute werde ich meinen Workflow beschreiben, ich hoffe, Sie nehmen etwas Nützliches weg.
Hier ist die Struktur eines Beispielprojekts. Sie können alle Teilprodukte verwenden, von denen Sie denken, dass sie logisch aufgenommen werden sollten. Der Schlüssel ist, einen separaten Ordner für Themen und einen neuen Ordner zu haben .scss Datei für jedes Thema.
| - _scss / | - | - _base / | - | - | - _config.scss | - | - _layouts / | - | - | - _l-grid.scss | - | - | - _l-default.scss | - | - _module / | - | - | - _m-accordions.scss | - | - | - _m-teasers.scss | - | -_themes / | - | - | - _light-theme / | - | - | - | - light .scss | - | - application.scss
In dem application.scss Datei importieren Sie alle Ihre Teile und ignorieren den Ordner _themen / An diesem Punkt. Dies bildet die Grundlage, auf der wir verschiedene Themen erstellen können.
@charset 'UTF-8'; // 1.Basis @import '_base / _config.scss'; // 2.Layouts @import '_layouts / _l-grid', '_layouts / _l-default'; // 3.Module @import '_modules / _m-accordions', '_modules / _m-teasers';
Das Konfigurieren Ihres Projekts ist sehr wichtig. Hier kommen Variablen zur Rettung, die es uns ermöglichen, Standardwerte festzulegen und Werte später auf der Designebene zu überschreiben. Hier sehen Sie einige Variablen für Farben, Schriftarten und Rahmeneinstellungen.
Weitere Informationen zum Benennen von Variablen finden Sie in Jim Nielsens Tipp: Benennen Sie Ihre SASS-Variablen modular.
@charset "UTF-8"; // Farben $ schwarz: # 000; $ white: #fff; $ red: # e2061c; $ graues Licht: # c9c8c8; $ grau: # 838282; $ grau-dunkel: # 333333; $ blau: # 253652; // Corp-Colors $ corp-color: $ blue! Default; $ corp-color-dark: dunkler ($ corp-color, 15%)! default; $ corp-color-second: $ red! default; $ corp-color-second-dark: dunkler ($ corp-color-second, 15%)! default; // Font $ base-font-size: 1.8! Default; $ base-font-family: Helvetica, Arial, Sans-Serif! default; $ base-font-color: $ gray-dark! default; // Border $ base-border-radius: 2px! Default; $ abgerundeter Rahmenradius: 50%! default; $ base-border-color: $ gray! default;
Der Schlüssel zu dieser Phase liegt in der Verwendung von !Standard Flag hinter den Variablendeklarationen. Auf diese Weise können Sie sie innerhalb des Designs überschreiben .scss Dateien; das !Standard effektiv sagt "Verwenden Sie diesen Wert, wenn er nicht anderweitig definiert ist".
Häufig erstellen Entwickler keine Variablen für Bilder, sondern schreiben URLs direkt in Selektoren. Ein Ansatz, der mir gefällt, besteht darin, alle Pfade in Partials zu entfernen und sie als Variablen in die Konfigurationsdatei einzufügen. Dies macht Ihr Leben einfacher und das Projekt besser wartbar.
// Images $ sprite: '… /images/base/sprite.png'! Default; $ colorbox-background: '… /images/base/colorbox-background.png'! default;
Hier sehen Sie einige Hintergrundvariablen in Aktion. Dies ist ein modularer Teil für ein Akkordeon, der die globale Variable verwendet $ Sprite aber auch eine Variable setzen und verwenden $ Akkordeon-Bgcolor Welches ist spezifisch für das Modul.
// 1.Konfigurieren Sie $ accordion-bgcolor: $ gray! Default; // 2.Base .m-Akkordeon padding: 20px; Hintergrund: $ Akkordeon-bgcolor; .m-accordion__trigger background: url ($ sprite) no-repeat;
In Ihrer Designdatei (z. B. _themen / _light-theme / light.scss Importieren Sie aus der obigen Demo - Struktur die application.scss das enthält alle Module, Layouts und so weiter. Dies ist die Basis für alles. Mit einem Thema legen wir eine zweite Ebene darüber. Nichts mehr. Sobald Sie importiert haben application.scss Fügen Sie dieselben Variablen hinzu, die zuvor verwendet wurden, definieren Sie jedoch Werte, die für dieses Thema spezifisch sind.
Wenn Sie mit dieser Technik neue Module zur Basis des Projekts hinzufügen, werden diese automatisch (und harmlos) in allen unseren Themen zusammengestellt.
@charset 'UTF-8'; // 1.Overwrite Zeug $ corp-color: $ grey; $ corp-color-darken: dunkler ($ corp-color, 10%); $ corp-color-second: $ blue; $ corp-color-second-dark: dunkler ($ corp-color-second, 10%); $ base-font-size: 1.6; $ base-font-family: Droid Sans, Georgia, Arial; $ base-border-radius: 0px; $ base-border-color: $ gray-light; // Images $ sprite: '… /images/light/sprite.png'; $ colorbox-background: '… /images/light/colorbox-background.png'; $ Akkordeon-Grundfarbe: $ Grau-Licht; // 2. Grundthema importieren @import '… /… / application';
Der letzte Schritt ist das Kompilieren von Sass in CSS und das Erhalten von zwei verschiedenen Dateien zur Verwendung. Wir müssen kompilieren application.scss und das light.scss. Mit der Kommandozeile würden Sie etwa Folgendes verwenden:
sass --watch YOUR / PATH / application.scss: DEIN / CSSPATH / application.css DEIN / PATH / _themes / _light-theme / light.scss: DEIN / CSSPATH / light.css
Wenn Sie eine App wie CodeKit oder Prepros App verwenden, wird das Kompilieren eher visuell.
Umfassen die light.css Datei in den Kopf Ihrer Seite und werfen Sie einen Blick auf Ihre frisch gestaltete Website.
Wie Sie sehen können, ist es hilfreich und unkompliziert, mehrere Themendateien zu haben, die alle auf einer soliden Grundlage basieren. Fühlen Sie sich frei, Fragen zu stellen oder Feedback zu geben und teilen Sie Ihre Erfahrungen mit uns im Kommentarbereich.
Accentsconagua