In diesem Beitrag werden wir über die technischen Besonderheiten der Verwendung von SASS sprechen und uns damit befassen Einrichten des SASS-Compilersüber die Kommandozeile. Durch die Einrichtung des SASS-Compilers werden wir verstehen, wie er funktioniert, und besser verstehen, wie der Prozess der Konvertierung einer SASS-Datei in eine CSS-Datei abläuft, was uns wiederum dabei helfen wird, besseren SASS-Code zu schreiben.
In diesem Beitrag werden wir darüber sprechen Verwendung von SASS auf Websites und in anderen Projekten. Sehen wir uns an, wie man SASS an verschiedene Ruby-Bibliotheken „anhängt“. Lassen Sie uns darüber sprechen, wie SASS Code zwischenspeichert, um die Arbeit zu beschleunigen. Für den korrekten Betrieb HTML-Seiten Es ist wichtig, dass die Kodierung angegeben wird. Daher müssen Sie verstehen, wie SASS mit der Kodierung umgeht. Und wir werden uns auch die SASS-Compiler-Befehle ansehen, um es zu konfigurieren.
Verwendung von SASS in Projekten und Websites
Es ist eine Möglichkeit, die CSS-Sprache zu erweitern, indem CSS eine Menge neuer Funktionen hinzugefügt wird. In Ihren Projekten oder auf Ihrer Website können Sie SASS auf vier verschiedene Arten nutzen:
- SASS kann als Ruby-Sprachmodul installiert und verwendet werden;
- Sie können mit SASS arbeiten, als wären Sie Befehlszeilentools des Betriebssystems.
- SASS kann als Rack-Framework-Plugin verwendet werden;
- SASS kann mit einem Desktop-Compiler oder einem Online-Compiler verwendet werden, in diesem Fall erfolgt der Konvertierungsprozess von SASS zu SCSS jedoch manuell.
Wenn Sie möchten, müssen Sie zunächst Ruby installieren, darüber haben wir bereits zuvor gesprochen.
Lassen Sie uns eine Tabelle erstellen, die die Befehle zum Kompilieren von SASS in CSS auflistet und ihnen eine kurze Beschreibung gibt.
Bitte beachten Sie, dass diese Befehle in ausgeführt werden Befehlszeile Betriebssystem.
SASS-Plugin für Rack. SASS-Plugin für Rails. SASS-Plugin für Merb
SASS kann einfach mit dem Rack-Plugin verwendet werden. Ich bin nicht sehr gut in der Ruby-Sprache, was ich wirklich bedauere, vielleicht schaffe ich es eines Tages, das nachzuholen, aber vorerst muss ich sagen, dass Rack ursprünglich ein Server-Rack war. Im Kontext der Ruby-Sprache: Rack ist eine Bibliothek oder ein Framework, das die Arbeit erleichtert und dem Webserver des Clients eine einfache Handhabung ermöglicht.
Wenn Sie wissen, was Rack ist und wie man damit arbeitet, verwenden Sie im Allgemeinen den folgenden Befehl, um das SASS-Plugin mit Rack zu verbinden:
config.gem „sass“
Wenn Sie das SASS-Plugin in der Rack-Anwendung aktivieren möchten, fügen Sie die folgenden Zeilen zur Datei config.ru hinzu, die im Stammverzeichnis der Anwendung vorhanden ist:
erfordern „sass/plugin/rack“ verwenden Sie Sass::Plugin::Rack
Wir haben uns angeschaut, wie Sie SASS mit der Ruby-Sprache und ihren Bibliotheken verwenden können. Lassen Sie uns nun über die SASS-Kompilierungsoptionen sprechen.
Caching-Mechanismus des SASS-Compilers
Der SASS-Caching-Mechanismus ist dem sehr ähnlich. Der SASS-Compiler speichert standardmäßig Dateien und Snippets (speichert häufig verwendeten kompilierten CSS-Code) im Cache, die er dann ohne Kompilierung verwendet, sofern der SASS-Code der Dateien nicht geändert wurde.
Um SASS zu beschleunigen, verwenden Entwickler die folgende Technik:
- Erstellen Sie eine gemeinsame SASS-Datei.
- Sie erstellen mehrere kleine SASS-Dateien, in die sie Stile für verschiedene Elemente schreiben.
- Importieren Sie kleine Dateien in große.
Dieser Ansatz beschleunigt die Kompilierung von SASS zu CSS erheblich. Der SASS-Compiler erstellt bei jeder Kompilierung Cache-Dateien. Wenn Sie eine Cache-Datei löschen, wird sie beim nächsten Kompilieren erneut erstellt. Wenn Sie keines der Frameworks verwenden, finden Sie die SASS-Cache-Dateien im Ordner sass-cache.
Wenn Sie die Caching-Funktion in SASS nicht benötigen, können Sie sie deaktivieren, indem Sie den Parameter :cache auf false setzen.
Einrichten des SASS-Compilers
Sie können den SASS-Compiler konfigurieren. Dafür gibt es spezielle SASS-Optionen oder SASS-Parameter, wie auch immer Sie es nennen möchten. Um den SASS-Compiler in Rail oder Rack zu konfigurieren, fügen Sie eine Codezeile hinzu, wie unten gezeigt Konfigurationsdatei Anwendungen:
Sass::Plugin.options[:style] = :compact
Sehen wir uns an, was wir in SASS mithilfe von SASS-Parametern oder -Optionen konfigurieren können.
| Nummer | Einstellungen fürSASS und deren Beschreibung |
| 1 | :
Stil Mit diesem SASS-Parameter können Sie den Stil der Ausgabedatei festlegen. |
| 2 | :
Syntax Mit dieser SASS-Option können Sie es dem Compiler mitteilen. Um die SASS-Syntax zu verwenden, müssen Sie dementsprechend Folgendes schreiben: sass; für die Syntax SCSS schreiben Sie: scss. Standardwert: sass. |
| 3 | :
Eigentum_
Syntax Diese SASS-Compiler-Einstellung gibt Regeln zum Schreiben von CSS-Regeln in SASS-Syntax an und funktioniert nicht in SCSS-Syntax. |
| 4 | :
Zwischenspeicher Mit dieser SASS-Option können Sie das Caching konfigurieren. Wenn der Cache-Parameter auf „true“ gesetzt ist, speichert der SASS-Compiler Codefragmente zwischen, die in die SASS-Quelldatei importiert werden. Die Caching-Optionen in SASS ähneln in gewisser Weise denen von . |
| 5 | :
lesen_
Zwischenspeicher Diese Option teilt dem SASS-Compiler mit, dass er den Code beim erneuten Kompilieren nicht zwischenspeichern soll, sondern nur den alten Cache verwenden kann, sofern der Cache-Parameter nicht angegeben ist. |
| 6 | :
Zwischenspeicher_
speichern In SASS können Sie einen Cache-Speicherordner konfigurieren. Wenn die Option auf eine Unterklasse von Sass::CacheStores::Base festgelegt ist, wird der Cache-Speicher zum Speichern und Abrufen zwischengespeicherter Kompilierungsergebnisse verwendet. |
| 7 | :
niemals_
aktualisieren Der SASS-Compiler kann so konfiguriert werden, dass CSS-Dateien niemals aktualisiert werden, indem dieser Parameter auf „true“ übergeben wird. |
| 8 | :
stets_
aktualisieren Der SASS-Compiler kann so konfiguriert werden, dass CSS-Dateien beim Aktualisieren und Speichern von Quelldateien immer aktualisiert werden, indem dieser Parameter auf „true“ übergeben wird. |
| 9 | :
stets_
überprüfen Diese SASS-Compiler-Option wird verwendet, wenn beim Serverstart alle SASS-Dateien neu in CSS kompiliert werden müssen. |
| 10 | :
Umfrage Wenn es auf „true“ gesetzt ist, verwenden Sie für Sass::Plugin::Compiler#watch immer die Backend-Abfrage anstelle der Standardabfrage Dateisystem. |
| 11 | :
voll_
Ausnahme Mit dieser SASS-Compiler-Einstellung können Sie die Anzeige von Fehlern festlegen; wenn Sie ihr den Wert true übergeben, werden die Fehler angezeigt. Dadurch wird die Zeilennummer angezeigt, in der der Compiler den Fehler gefunden hat. |
| 12 | :
Vorlage_
Standort Mit diesem Parameter können Sie den Verzeichnispfad aus SASS-Vorlagen festlegen. |
| 13 | :
CSS_
Standort Diese Option gibt den Speicherort der CSS-Dateien an |
| 14 | :
Unix_
Zeilenumbrüche Zeilenumbruch in Windows CRLF, Zeilenumbruch in Unix CR. Mit diesem Parameter können Sie Zeilenumbrüche in der Datei von Windows zu Unix ändern. |
| 15 | :
Dateiname Der Compiler kann eine Datei angeben, in der das Fehlerprotokoll gespeichert wird. |
| 16 | :
Linie Diese SASS-Option gibt die erste Zeile der SASS-Vorlage an, von der aus gezählt werden soll, um die Zeilennummern anzugeben, wenn ein Fehler erkannt wird. |
| 17 | :
Belastung_
Wege Diese Option wird verwendet, um die SASS-Datei bei der Verwendung einzuschließen @ importieren Richtlinien. |
| 18 | :
Dateisystem_
Importeur Diese Option wird zum Importieren von Dateien aus dem verwendeten Dateisystem verwendet Sass:: Importeure:: Base |
| 19 | :
Quellkarte Dieser Parameter hilft dem Browser, SASS-Stile zu finden. Dieser Parameter kann drei Werte annehmen: · : Auto: Dieser Wert wird verwendet, um den Speicherort einer Datei mithilfe eines relativen URI (URI in HTTP) anzugeben.· : Datei: Dieser Wert wird verwendet, um den lokalen Pfad zur Datei anzugeben und wird nicht für die Arbeit mit Remote-Servern verwendet.· : im Einklang: Dieser Wert enthält die Text-Sourcemap. |
| 20 | :
Linie_
Zahlen Diese Option wird benötigt, um Fehlernummern in der CSS-Datei anzuzeigen; Fehler werden angezeigt, wenn sie auf „true“ gesetzt ist. |
| 21 | :
verfolgen_
Selektoren Der SASS-Compiler kann so konfiguriert werden, dass er bei der Verfolgung von CSS-Importselektoren und Mixins hilft. Der Compiler hilft, wenn der Parameter true an diese Option übergeben wird. |
| 22 | :
debuggen_
die Info Diese Option hilft bei der Konfiguration des SASS-Compilers für das Code-Debugging. |
| 23 | :
Brauch Wenn Sie SASS-Code verwenden möchten verschiedene Anwendungen, dann wird Ihnen diese Option helfen. |
| 24 | :
ruhig Mit dieser Option können Sie vom SASS-Compiler erzeugte Warnungen deaktivieren. |
SASS-Dateikodierung. Festlegen der SASS-Compiler-Kodierung
Es macht wenig Sinn, die SASS-Compiler-Kodierung zu konfigurieren, da SASS diese automatisch erkennt. Um die Kodierung zu bestimmen, schaut sich SASS zunächst die CSS-Spezifikation an und gibt den resultierenden Ruby-Wert zurück: SASS liest die Unicode-Bytereihenfolge nach der @charset-Direktive. Wenn SASS die Kodierung nicht verstehen kann, kodiert es die Dateien in UTF-8.
Um die Codierung für den SASS-Compiler explizit festzulegen, verwenden Sie die @charset-Direktive.
Wie der SASS-Compiler die Dateisyntax bestimmt
Sie können den SASS-Compiler so konfigurieren, dass er die von Ihnen verwendete Syntax automatisch erkennt. Standardmäßig geht der SASS-Compiler davon aus, dass er Code mit SASS-Syntax zur Verarbeitung erhält.
Wenn Sie SASS in SCSS ändern möchten, verwenden Sie die Option -scss. Dann denkt der Compiler, dass er die Datei als scss verarbeiten muss.
Der SASS-Compiler kann die Syntax bestimmen, wenn er die Erweiterung der Quelldatei liest, aber seine andere Funktion besteht darin, dass er scss in sass und umgekehrt konvertieren kann, sodass Sie keine Probleme und Fehler aufgrund einer falsch angegebenen SASS-Dateisyntax haben sollten.
Bevor Sie Sass verwenden können, müssen Sie es in Ihrem Projekt konfigurieren. Wenn Sie nur lesen möchten, können Sie gerne lesen. Wir empfehlen jedoch, zuerst Sass zu installieren. Installieren Sie Sass, um alle Funktionen von Sass zu verstehen.
Vorverarbeitung
Das Schreiben von CSS macht an sich schon Spaß, aber wenn ein Stylesheet riesig wird, wird es schwierig, es zu pflegen. Und in diesem Fall hilft uns der Präprozessor. Mit Sass können Sie Funktionen verwenden, die in CSS selbst nicht verfügbar sind, zum Beispiel Variablen, Verschachtelung, Mixins, Vererbung und andere nette Dinge, die den Komfort des Schreibens von CSS wiederherstellen.
Sobald Sie Sass verwenden, verarbeitet der Präprozessor Ihre Sass-Datei und speichert sie als einfache CSS-Datei, die Sie auf jeder Site verwenden können.
Der einfachste Weg, dieses Ergebnis zu erhalten, ist die Verwendung des Terminals. Sobald Sass installiert ist, können Sie Ihr Sass mit dem Befehl sass in CSS kompilieren. Sie müssen Sass nur mitteilen, wo Sie die Sass-Datei erhalten und in welche CSS-Datei sie kompiliert werden soll. Wenn Sie beispielsweise den Befehl „sass input.scss „output.css“ im Terminal ausführen, weisen Sie Sass an, eine Sass-Datei, „input.scss“, zu nehmen und in „output.css“ zu kompilieren.
Variablen
Stellen Sie sich Variablen als eine Möglichkeit zum Speichern von Informationen vor, die Sie beim Schreiben jedes Projektstils verwenden möchten. Sie können Farben, Schriftartenstapel oder andere CSS-Werte, die Sie verwenden möchten, in Variablen speichern. Um eine Variable in Sass zu erstellen, müssen Sie das $-Symbol verwenden. Schauen wir uns ein Beispiel an:
SCSS-Syntax
$font-stack: Helvetica, serifenlos; $Primärfarbe: #333; Körper (Schriftart: 100 % $font-stack; Farbe: $primary-color;)Sass-Syntax
$font-stack: Helvetica, serifenlos $primary-color: #333 Hauptschriftart: 100 % $font-stack-Farbe: $primary-colorWenn Sass verarbeitet wird, übernimmt es die Werte, die wir in $font-stack und $primary-color festgelegt haben, und fügt sie an den Stellen in die reguläre CSS-Datei ein, an denen wir die Variablen als Werte angegeben haben. Dies macht Variablen zu einer leistungsstarken Funktion, beispielsweise bei der Arbeit mit Markenfarben, die auf einer Website verwendet werden.
Textkörper (Schriftart: 100 % Helvetica, serifenlos; Farbe: #333; )Nester
Beim Schreiben von HTML ist Ihnen wahrscheinlich aufgefallen, dass es eine klare verschachtelte und visuelle Hierarchie aufweist. Dies ist bei CSS nicht der Fall.
Mit Sass können Sie CSS-Selektoren auf die gleiche Weise wie in der visuellen HTML-Hierarchie verschachteln. Denken Sie jedoch daran, dass eine übermäßige Verschachtelung Ihr Dokument weniger lesbar und verständlich macht, was als schlechte Praxis gilt.
Um zu verstehen, was wir meinen, hier ein typisches Beispiel für Navigationsstile auf einer Website:
SCSS-Syntax
nav ( ul ( margin : 0 ; padding : 0 ; list-style : none ; ) li ( display : inline-block ; ) a ( display : block ; padding : 6px 12px ; text-decoration : none ; ) )Sass-Syntax
nav ul margin: 0 padding: 0 list-style: none li display: inline-block a display: block padding: 6px 12px text-decoration: noneIst Ihnen aufgefallen, dass die Selektoren ul , li und a im Navi-Selektor verschachtelt sind? Dies ist eine großartige Möglichkeit, Ihre CSS-Datei lesbarer zu machen. Wenn Sie die CSS-Datei generieren, sieht die Ausgabe etwa so aus:
nav ul (margin: 0; padding: 0; list-style: none;) nav li (display: inline-block;) nav a (display: block; padding: 6px 12px; text-decoration: none;)Zersplitterung
Sie können Sass-Dateischnipsel erstellen, die kleine CSS-Schnipsel enthalten, die in anderen Sass-Dateien verwendet werden können. Dies ist eine großartige Möglichkeit, Ihr CSS modular zu gestalten und auch einfacher zu warten. Ein Fragment ist eine einfache Sass-Datei, deren Name mit einem Unterstrich beginnt, zum Beispiel _partial.scss. Der Unterstrich in einem Sass-Dateinamen teilt dem Compiler mit, dass es sich nur um einen Ausschnitt handelt und nicht in CSS kompiliert werden sollte. Sass-Fragmente werden mithilfe der @import-Direktive eingebunden.
Importieren
CSS verfügt über eine Importfunktion, mit der Sie Ihre CSS-Dateien in kleinere Dateien aufteilen und diese einfacher verwalten können. Diese Methode hat jedoch einen erheblichen Nachteil: Jedes Mal, wenn Sie @import in CSS verwenden, wird eine weitere HTTP-Anfrage in CSS erstellt. Sass vertritt die Idee, Dateien über die @import-Direktive zu importieren, doch statt einen separaten HTTP-Request zu erstellen, importiert Sass die in der Direktive angegebene Datei in diejenige, in der sie aufgerufen wird, also Die Ausgabe ist eine aus mehreren Fragmenten kompilierte CSS-Datei.
Sie haben beispielsweise mehrere Sass-Dateiausschnitte – _reset.scss und base.scss . Und wir wollen _reset.scss in base.scss importieren.
SCSS-Syntax
// _reset.scss html, body, ul, ol ( margin: 0; padding: 0; ) // base.scss @import "reset" ; Körper (Schriftart: 100 % Helvetica, serifenlos; Hintergrundfarbe: #efefef;)Sass-Syntax
// _reset.sass html, body, ul, ol margin: 0 padding: 0 // base.sass @import reset body Schriftart: 100 % Helvetica, serifenlos Hintergrundfarbe: #efefefBeachten Sie, dass wir @import „reset“ verwenden; in der Datei base.scss. Wenn Sie eine Datei importieren, müssen Sie die Erweiterung .scss nicht angeben. Sass ist eine intelligente Sprache und wird es selbst herausfinden. Wenn das CSS generiert wird, erhalten Sie:
html , body , ul , ol ( margin : 0 ; padding : 0 ; ) body ( Schriftart : 100 % Helvetica , serifenlos ; Hintergrundfarbe : #efefef ; )Mixins (Mixins)
Manche Dinge in CSS sind ziemlich mühsam zu schreiben, insbesondere in CSS3, wo man außerdem oft eine große Anzahl von Herstellerpräfixen verwenden muss. Mit Mixins können Sie Gruppen von CSS-Deklarationen erstellen, die Sie auf Ihrer Website mehrfach verwenden. Es ist gut, Mixins für Herstellerpräfixe zu verwenden. Beispiel für border-radius:
SCSS-Syntax
@mixin border-radius ($radius) ( -webkit-border-radius : $radius ; -moz-border-radius : $radius ; -ms-border-radius : $radius ; border-radius : $radius ; ) .box ( @include border-radius (10px); )Sass-Syntax
=Grenzradius ($radius) -webkit-grenzradius: $radius -moz-grenzradius: $radius -ms-grenzradius: $radius grenzradius: $radius .box +grenzradius (10px)Um ein Mixin zu erstellen, verwenden Sie die @mixin-Direktive + den Namen des Mixins. Wir haben unseren Mixin „Grenzradius“ genannt. Außerdem verwenden wir im Mixin die Variable $radius in den Klammern, wodurch wir in der Variablen alles übergeben können, was wir wollen. Sobald Sie ein Mixin erstellt haben, können Sie es als CSS-Parameter verwenden, indem Sie den Aufruf mit @include und dem Namen des Mixins beginnen. Wenn Ihr CSS kompiliert wird, erhalten Sie Folgendes:
.box ( -webkit-border-radius : 10px ; -moz-border-radius : 10px ; -ms-border-radius : 10px ; border-radius : 10px ; )Erweiterung/Vererbung
Dies ist eines der meisten nützliche Funktionen Sass. Mit der @extend-Direktive können Sie Sätze von CSS-Eigenschaften von einem Selektor auf einen anderen vererben. Dadurch können Sie Ihre Sass-Datei „sauber“ halten. In unserem Beispiel zeigen wir Ihnen, wie Sie Fehler-, Warn- und Erfolgsbenachrichtigungen mithilfe anderer Sass-Funktionen gestalten, die mit den Vorlagenklassen der Erweiterung einhergehen.
Eine Template-Klasse ist ein spezieller Klassentyp, der nur ausgegeben wird, wenn Sie eine Erweiterung verwenden – so bleibt Ihr kompiliertes CSS sauber und ordentlich.
SCSS-Syntax
%equal-heights ( display : flex ; flex-wrap : wrap ; ) %message-shared ( border : 1px solid #ccc ; padding : 10px ; color : #333 ; ) .message ( @extend %message-shared ; ). success ( @extend %message-shared ; border-color : green ; ) .error ( @extend %message-shared ; border-color : red ; ) .warning ( @extend %message-shared ; border-color : yellow ; )Sass-Syntax
// Dieser Codeabschnitt schafft es nicht in das CSS, da %equal-heights nie erweitert wurde.%equal-heights-Anzeige: Flex Flex-Wrap: Wrap // Dieser Code wird in CSS landen, weil %message-shared erweitert ist.%message-shared Rahmen: 1 Pixel fest #ccc Polsterung: 10 Pixel Farbe: #333 .message @extend %message-shared .success @extend %message-shared Rahmenfarbe: grün .error @extend %message-shared Rahmenfarbe: rot .warning @extend %message-shared border-color : gelbDer obige Code weist die Klassen .message , .success , .error und .warning an, sich wie %message-shared zu verhalten. Das bedeutet, dass überall dort, wo %message-shared aufgerufen wird, auch .message , .success , .error und .warning aufgerufen werden. Die Magie geschieht im generierten CSS, wo jede dieser Klassen CSS-Eigenschaften erhält, genau wie %message-shared . Dadurch können Sie vermeiden, viele Klassen in HTML-Elementen zu schreiben.
Sie können die meisten einfachen CSS-Selektoren erweitern, indem Sie sie zu Vorlagenklassen in Sass hinzufügen. Die Verwendung von Vorlagen ist jedoch möglich der einfachste Weg Stellen Sie sicher, dass Sie die Klasse nicht dort erweitern, wo sie in Ihren Stilen verwendet wird, da dies zu unbeabsichtigten Stilsätzen in Ihrem CSS führen könnte.
Wenn Sie Ihr CSS generieren, sieht es wie im folgenden Beispiel aus. Bitte beachten Sie, dass %equal-heights nicht in das CSS gelangt, da es noch nie verwendet wurde.
.message, .success, .error, .warning (Rahmen: 1 Pixel durchgehend #cccccc; Polsterung: 10 Pixel; Farbe: #333;).success (Rahmenfarbe: grün;).error (Rahmenfarbe: rot;). Warnung (Rahmenfarbe: gelb;)Mathematische Operatoren
Die Verwendung von Mathematik in CSS ist sehr nützlich. Sass verfügt über mehrere standardmäßige mathematische Operatoren wie +, -, *, / und %. In unserem Beispiel führen wir einfache Berechnungen durch, um die Breite von aside und Article zu berechnen.
SCSS-Syntax
.container (Breite: 100 %;) Artikel [Rolle = „Haupt“] (Float: links; Breite: 600 Pixel / 960 Pixel * 100 %;) aside [Rolle = „Komplementär“] (Float: rechts; Breite: 300 Pixel / 960 Pixel * 100% ; )Sass-Syntax
.container Breite: 100 % Artikel [Rolle = „Haupt“] Float: linke Breite: 600 Pixel / 960 Pixel * 100 % aside [ Rolle = „komplementär“] Float: rechte Breite: 300 Pixel / 960 Pixel * 100 %Wir haben ein einfaches responsives modulares Raster mit einer Breite von 960 Pixeln erstellt. Mithilfe mathematischer Operatoren haben wir die resultierenden Daten mit Pixelwerten genommen und diese ohne großen Aufwand in Prozentwerte umgewandelt. Das kompilierte CSS sieht so aus:
.container (Breite: 100 %;) Artikel [Rolle = „Haupt“] (Float: links; Breite: 62,5 %;) aside [Rolle = „Komplementär“] (Float: rechts; Breite: 31,25 %;)
Sass ist eine CSS-Erweiterung, die dem Ganzen Kraft und Eleganz verleiht in einfacher Sprache. Sass bietet Ihnen die Möglichkeit, Variablen, verschachtelte Regeln, Mixins, Inline-Importe und mehr zu verwenden, alles mit einer vollständig CSS-kompatiblen Syntax. Sass hilft dabei, große Stylesheets gut zu organisieren und kleine Stile schnell auszuführen, insbesondere mit der Compass-Stilbibliothek.
Ziel dieses Artikels ist es, deutlich zu machen, wie Sass in verschiedenen Fällen funktioniert, und selbst zu entscheiden, ob Sie es benötigen.
Syntax
Für Sass stehen zwei Syntaxen zur Verfügung. Die erste, als SCSS (Sassy CSS) bekannte und in diesem Artikel verwendete, ist die erweiterte CSS-Syntax. Das bedeutet, dass jedes gültige CSS-Stylesheet eine gültige SCSS-Datei ist, die dieselbe Logik trägt. Darüber hinaus versteht SCSS die meisten CSS-Hacks und Herstellersyntaxen, beispielsweise die Filtersyntax im alten IE. Diese Syntax wird durch die unten beschriebene Sass-Funktionalität verbessert. Dateien, die diese Syntax verwenden, haben die Erweiterung .scss.
Die zweite und ältere Syntax, auch Edge-Syntax oder manchmal auch nur Sass genannt, bietet eine prägnantere Möglichkeit, mit CSS zu arbeiten. Es verwendet Einrückungen anstelle von Klammern, um verschachtelte Selektoren zu trennen, und Zeilenumbrüche anstelle von Semikolons, um Eigenschaften zu trennen. Manchmal ist es einfacher zu verstehen und schneller zu schreiben als SCSS. Tatsächlich haben diese Syntaxen die gleiche Funktionalität, obwohl einige einen etwas anderen Ansatz verfolgen. Dateien, die diese Syntax verwenden, haben die Erweiterung .sass.
Beide Syntaxen können in der anderen Syntax geschriebene Dateien importieren. Mit dem Befehl sass-convert können Dateien automatisch von einem in ein anderes konvertiert werden:
# Sass in SCSS konvertieren $ sass-convert style.sass style.scss # SCSS in Sass konvertieren $ sass-convert style.scss style.sass
Sass verwenden
Sass kann auf drei Arten verwendet werden: als Befehlszeile, als eigenständiges Ruby-Modul und als Plugin für Rack-Frameworks, einschließlich Ruby on Rails und Merb. Für all dies müssen Sie zunächst das Sass-Juwel installieren:
Wenn Sie Windows verwenden, müssen Sie möglicherweise zuerst Ruby installieren.
Um Sass über die Befehlszeile auszuführen, verwenden Sie einfach:
sass input.scss output.css
Sie können Sass auch anweisen, die Datei zu überwachen und das CSS jedes Mal zu aktualisieren, wenn sich die Sass-Datei ändert:
sass --watch input.scss:output.css
Wenn Sie ein Verzeichnis mit vielen Sass-Dateien haben, können Sie Sass auch anweisen, das gesamte Verzeichnis zu überwachen:
sass --watch app/sass:public/stylesheets
Verwenden Sie sass --help für eine vollständige Dokumentation.
Selektoren
CSS vs. SCSS-Selektoren.
#main (Farbe: #999;) #main .content (Farbe: #bfbfbf;)Das obige CSS-Snippet könnte in SCSS wie folgt geschrieben werden:
#main( Farbe: #999; .content( Farbe: #bfbfbf; ) )
Wie wir sehen können, ähnelt die SCSS-Struktur eher der DOM-Struktur. Dadurch können wir unser CSS effizienter organisieren. Hier sind Beispiele:
#main h1 ( Farbe: #00ff00; Breite: 97 %; .title ( Hintergrundfarbe: #ff0000; Farbe: #000000; ) )
Wird zusammengestellt zu:
#main h1 ( Farbe: #00ff00; Breite: 97 %; ) #main h1 .title( Hintergrundfarbe: #ff0000; Farbe: #000000; )
Bezogen auf den übergeordneten Selektor:
#wrapper h1( width:20px; &:hover( width:25px; ) )
& wird durch den übergeordneten Selektor ersetzt. Das heißt, der obige Code entspricht:
#wrapper h1( width:20px; ) #wrapper h1:hover( width:25px; )
Importe
Normaler Import.
@import „foo.css“; //imports foo.css @import „foo“ screen; //imports foo.scss @import „foo.scss“ screen; //importiert foo.scss @import „foo1“,“foo2“ screen; //importiert foo1.scss und foo2 scssTeilweise
Wenn Sie die SCSS-Datei nicht als CSS kompilieren möchten, können Sie „_“ vor dem Dateinamen verwenden.
@import „Farben“; //_colors.scss wird importiert @import „utils/foo.scss“; // Dies importiert fo.scss in den Ordner utils.
Verschachtelte Importe:
Wenn demo.scss Folgendes enthält:
Beispiel (Farbe: rot;)
#main ( @import „demo“; )
Wird zusammengestellt
#main .example ( Farbe: rot; )
Variablen
SCSS-Variablen beginnen mit einem Zeichen $ .
$Breite: 10px; $headercolor:rot; #main h1( width: $width; color:$headercolor; )
Wird zusammengestellt zu:
#main h1( Breite: 10px; Farbe:rot; )
Variablen sind nur innerhalb der verschachtelten Selektorebene verfügbar, auf der sie deklariert werden. Wenn Sie möchten, dass auf eine Variable außerhalb des Gültigkeitsbereichs zugegriffen werden kann, müssen Sie sie ergänzen !global
#main ( $width: 5em !global; width: $width; ) #sidebar ( width: $width; )
Sie können Variablen in einer separaten Datei angeben und diese SCSS-Datei importieren, um diese Variablen zu verwenden. Dies ist wie eine Konfigurationsdatei für Ihr Projekt. Wenn Sie den Wert von Variablen ändern, wird er überall dort geändert, wo Sie ihn verwenden. Dies ist bei großen Projekten sehr effektiv. Wir werden das etwas später sehen.
Sie können in SCSS auch verschiedene Vorgänge ausführen. Beispielsweise:
P ( Schriftart: 10px/8px; // Reines CSS ohne Division $width: 1000px; width: $width/2; // Verwendung von Variablen in der Division width: Round(1.5)/2; // Verwendung von Funktion und Divisionshöhe: ( 500px/2); // Verwendung von Klammern und Teilungsrand links: 5px + 8px/2px; // Verwendung von Additions- und Teilungsschriftart: (kursiv fett 10px/8px); // In der Liste wird die Klammer nicht berücksichtigt )
Kompiliert zu:
Einfügen: #{}
Sie können Variablen in Namens- und Werteigenschaften mit #() verwenden. Beispielsweise:
$name:foo; $attr:border; p.#($name) ( #($attr)-color: blue; )
Kompiliert zu:
P.foo (Rahmenfarbe: Blau;)
Kontrollanweisungen
@Wenn
p ( @if 1 + 1 == 2 ( border: 1px solid; ) @if 5< 3 { border: 2px dotted; } @if null { border: 3px double; } }Kompiliert zu:
P (Rand: 1px fest;)
@für
@for $i von 1 bis 3 ( .item-#($i) ( width: 2em * $i; ) )Kompiliert zu:
Item-1 (Breite: 2em;) .item-2 (Breite: 4em;) .item-3 (Breite: 6em;)
@jede
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) ( #($header) ( Schriftgröße: $size; ) )Kompiliert zu:
H1 (Schriftgröße: 2em; ) h2 (Schriftgröße: 1,5em; ) h3 (Schriftgröße: 1,2em; )
@während
$i: 6; @while $i > 0 ( .item-#($i) ( width: 2em * $i; ) $i: $i - 2; )Kompiliert zu:
Item-6 (Breite: 12em;) .item-4 (Breite: 8em;) .item-2 (Breite: 4em;)
Hagfish
Mit Mixins können Sie Stile definieren, die im gesamten Stylesheet wiederverwendet werden können. Sie können sich Mixins als Funktionen in einer anderen Programmiersprache vorstellen. Sie können Variablen wie in Funktionen jeder anderen Programmiersprache übergeben. In SCSS geben Mixins eine Reihe von CSS-Regeln zurück. Sie können Mixins wie dieses verwenden, indem Sie den durch die @mixin-Direktive definierten Mixin-Namen @include verwenden.
Betrachten Sie das folgende Beispiel:
@mixin großer Text ( Schriftart: ( Familie: Arial; Größe: 20 Pixel; Gewicht: fett; ) Farbe: #ff0000; ) .page-title ( @include großer Text; Abstand: 4 Pixel; Rand oben: 10 Pixel; )
Kompiliert zu:
Seitentitel (Schriftfamilie: Arial; Schriftgröße: 20 Pixel; Schriftstärke: Fett; Farbe: #ff0000; Abstand: 4 Pixel; Rand oben: 10 Pixel;)
Sie können auch zusammengesetzte Mixins verwenden, etwa so:
@mixin mixin-one( Farbe: rot; ) @mixin mixin-two( width:20px; ) .page-title ( @include mixin-one; @include mixin-two; )
Sie können Variablen auch in Mixins übergeben:
$globel-prefixes:webkit moz ms o; @mixin prefixer ($property,$value,$prefixes:null)( @if $prefixes==null( @each $prefix in $globel-prefixes ( -#($prefix)-#($property): $value; ) ) @else ( @each $prefix in $prefixes ( -#($prefix)-#($property): $value; ) ) #($property): $value; ) *( @include prefixer(box-sizing ,Grenzkasten); )
Wird zusammengestellt zu:
*( -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing: Border-Box; )
Funktionen
Sie können auch Funktionen definieren, die einen Wert zurückgeben. Beispielsweise.
$Anzahl der Spalten:12; $rinnenbreite:2%; @function get-column-width($i)( @return (100% - ($no-of-columns/$i - 1) * $gutter-width) / $no-of-columns * $i; ) . col-6 ( width:get-column-width(6); )
Wird zusammengestellt zu:
Spalte 6 (Breite: 49 %; )
Erweiterungen
Sie werden auf eine Situation stoßen, in der Sie Stile wiederverwenden müssen. Betrachten Sie das folgende Beispiel:
Bis auf die Farbe haben beide den gleichen Stil.
Btn( Rand:10px; Farbe:schwarz; Breite:200px; Höhe:100px; ) .btn-blue( @extend .btn; Hintergrund:blau; )
Dies wird kompiliert zu:
Btn,.btn-blue( Rand:10px; Farbe:schwarz; Breite:200px; Höhe:100px; ) .btn-blue( Hintergrund:blau; )
Sie können auch Erweiterungen verknüpfen und mehrere Erweiterungen in einem CSS-Selektor verwenden.
Wenn Sie nicht möchten, dass die Erweiterungsdirektive in CSS kompiliert wird, können Sie % vor dem Selektor verwenden.
%btn( Rand:10px; Farbe:schwarz; Breite:200px; Höhe:100px; ) .btn-blue( @extend %btn; Hintergrund:blau; ) .btn-red( @extend %btn; Hintergrund:rot; ) Wird kompiliert zu: .btn-blue( Rand:10px; Farbe:schwarz; Breite:200px; Höhe:100px; Hintergrund:blau; ) .btn-red( Rand:10px; Farbe:schwarz; Breite:200px; Höhe:100px ; Hintergrund:rot; )
Wenn Sie ein Anfänger-Designer sind WordPress-Themes, dann sind Sie wahrscheinlich schon auf das Problem langer CSS-Dateien gestoßen, denn Sie müssen diese strukturiert, skalierbar und lesbar halten. Sie haben wahrscheinlich auch gehört, dass viele Designer und Frontend-Entwickler die Verwendung einer CSS-Präprozessorsprache wie Sass oder LESS empfehlen. Aber was ist es? Wie fange ich an, mit ihnen zu arbeiten? In diesem Artikel zeigen wir Ihnen, wie Sie mit Sass beginnen. Wir verraten Ihnen auch, was es ist CSS-Präprozessor, warum es benötigt wird und wie man es richtig installiert und verwendet.
Was ist Sass?
Das von uns verwendete CSS wurde für die Erstellung von Stylesheets für Websites entwickelt. Da sich das Web und die Bedürfnisse der Designer jedoch weiterentwickelten, wurde eine Stylesheet-Sprache benötigt, die es uns ermöglichen würde, mit weniger Aufwand und Zeit mehr zu erreichen. Mit CSS-Präprozessorsprachen wie Sass können wir Funktionen verwenden, die derzeit in CSS nicht verfügbar sind, z. B. die Verwendung von Variablen, grundlegenden mathematischen Operatoren, verschachtelten Regeln, Mixins usw.
Es ähnelt in vielerlei Hinsicht PHP, einem Präprozessor, der Skripte auf dem Server ausführt und HTML als Ausgabe generiert. Sass verarbeitet auch .scss-Dateien, um CSS-Dateien zu generieren, die von Browsern verwendet werden können.
Ab Version 3.8 wurden WordPress-Administrator-Stylesheets für die Verwendung von Sass für die Entwicklung portiert. Es gibt viele WordPress-Store-Themes, die Sass erfolgreich nutzen, um den Entwicklungsprozess zu beschleunigen.
Verwenden von Sass zur Entwicklung von WordPress-Themes
Die meisten Theme-Entwickler nutzen lokales Hosting für die Arbeit, bevor sie das Theme auf einer Live-Site veröffentlichen. Da Sass eine Präprozessorsprache ist, müssen Sie sie auf Ihrem lokalen Host installieren.
Zuerst müssen Sie Sass installieren. Es kann als Befehlszeile verwendet werden, es gibt jedoch mehrere Anwendungs-GUI für Sass. Wir empfehlen die Verwendung von Koala, da es kostenlos und Open Source ist Quellcode und ist für Mac, Windows und Linux verfügbar.
Um dieses Beispiel zu testen, müssen Sie ein neues Thema erstellen. Erstellen Sie einfach einen neuen Ordner in /wp-content/themes/. Sie können es beliebig nennen, zum Beispiel „Mytheme“. Darin drin leerer Ordner Erstellen Sie einen weiteren Ordner und nennen Sie ihn Stylesheets.
Erstellen Sie im Stylesheets-Ordner eine Datei style.scss mit einem beliebigen Texteditor wie Notepad.
Jetzt müssen Sie Koala öffnen und auf das Plus-Symbol klicken, um ein neues Projekt hinzuzufügen. Wählen Sie als Nächstes Ihren Themenordner aus und fügen Sie ihn Ihrem Projekt hinzu. Sie werden feststellen, dass Koala die Sass-Datei automatisch in Ihrem Stylesheets-Ordner findet und anzeigt.
Klicken Rechtsklick Bewegen Sie die Maus über Ihre Sass-Datei und wählen Sie die Option aus Ausgabepfad festlegen. Wählen Sie als Nächstes den Stammordner Ihres Themes aus, in unserem Beispiel wird es so sein /wp-content/themes/mytheme/ und drücken Sie die Eingabetaste. Koala generiert als Ausgabe eine CSS-Datei in Ihrem Theme-Ordner. Um es zu testen, müssen Sie Ihre Sass-Datei öffnen style.scss- V Texteditor Geben Sie Notepad ein und fügen Sie den folgenden Code hinzu:
$Schriftarten: Arial, Verdana, Sans-Serif; body ( Schriftfamilie:$fonts; )
Speichern Sie nun Ihre Änderungen und kehren Sie zu Koala zurück. Klicken Sie mit der rechten Maustaste auf Ihre Sass-Datei. Auf der rechten Seite wird eine Seitenleiste angezeigt. Um Ihre Sass-Datei zu kompilieren, klicken Sie einfach auf die Schaltfläche 'Kompilieren'. Sie können das Ergebnis sehen, indem Sie die Datei öffnen style.css in Ihrem Theme-Ordner und das Ergebnis wird sein:
Textkörper (Schriftfamilie: Arial, Verdana, Sans-Serif; )
Beachten Sie, dass wir eine Variable definiert haben $fonts in unserer Sass-Datei. Jetzt müssen wir an keiner Stelle, an der wir eine Schriftfamilie hinzufügen müssen, alle Schriftarten immer wieder registrieren. Wir können es einfach verwenden $fonts.
Welche Vorteile bringt Sass für CSS?
Sass ist unglaublich leistungsstark, abwärtskompatibel und extrem einfach zu erlernen. Wie bereits erwähnt, können Sie Variablen, verschachtelte Regeln, Mixins erstellen, Importe verwenden, mathematische und logische Operatoren usw. Jetzt zeigen wir Ihnen einige Beispiele und Sie können sie auf Ihrem WordPress-Theme ausprobieren.
Verwalten mehrerer Stylesheets
Eine der größten Herausforderungen für Sie als WordPress-Theme-Designer sind große Stylesheets mit vielen Abschnitten. Während Sie am Thema arbeiten, werden Sie wahrscheinlich mehrmals in der Datei nach oben und unten scrollen, um Eigenschaften zu ändern. Mit Sass können Sie mehrere Dateien in Ihr Haupt-Stylesheet importieren und erhalten am Ende eine einzige CSS-Datei für Ihr Theme.
Was ist mit CSS @import?
Das Problem bei der Verwendung von @import in Ihrer CSS-Datei besteht darin, dass Ihre CSS-Datei jedes Mal, wenn Sie @import hinzufügen, eine zusätzliche HTTP-Anfrage an den Server stellt. Dies wirkt sich auf das Laden der Seite aus, was für das Projekt nicht besonders gut ist. Wenn Sie hingegen @import in Sass verwenden, werden die Dateien in Ihre Sass-Datei aufgenommen und in einer einzigen CSS-Datei für alle Browser zusammengefasst.
Um zu verstehen, wie man @import in Sass verwendet, müssen Sie zunächst eine Datei erstellen reset.scss im Stylesheets-Ordner Ihres Themes und fügen Sie den folgenden Code hinein.
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Lizenz: keine (gemeinfrei) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, groß, zitieren, Code, del, dfn, em, img, ins, kbd, q, s, samp, klein, Strike, stark, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, Article, aside, Canvas, Details, Embed, Figure, figcaption, Footer, Header, hgroup, Menü, Navigation, Ausgabe, Ruby, Abschnitt, Zusammenfassung, Zeit, Markierung, Audio, Video ( Rand: 0; Polsterung: 0; Rahmen: 0; Schriftgröße: 100 %; Schriftart: erben; vertikale Ausrichtung: Grundlinie ; ) /* HTML5-Anzeigerolle für ältere Browser zurückgesetzt */ Artikel, aside, Details, figcaption, Abbildung, Fußzeile, Kopfzeile, hgroup, Menü, Navigation, Abschnitt ( Anzeige: Block; ) Körper ( Zeilenhöhe: 1; ) ol, ul ( list-style: none; ) blockquote, q ( quotes: none; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border- Zusammenbruch: Zusammenbruch; Randabstand: 0; )
Öffnen Sie nun Ihre Hauptdatei „style.scss“ und fügen Sie die folgende Zeile an der Stelle hinzu, an der Sie die Reset-Datei importieren möchten.
Übersetzung des Artikels: Der Sass-Leitfaden für absolute Anfänger.
Andrew Chalkley.
Was ist SASS?
SASS ist eine Abkürzung für Syntaktisch fantastische Stylesheets ist eine CSS-basierte Metasprache, deren Name übersetzt werden kann als „CSS mit hervorragender Syntax“, entworfen von Hampton Catlin.
Es ist ein Mittel zur Vereinfachung des Gründungsprozesses CSS-Stile, was die Entwicklung und anschließende Pflege des Codes erheblich vereinfacht.
Mussten Sie beispielsweise bei der Betreuung eines bestimmten unentschlossenen Kunden schon einmal den gesamten Inhalt einer Stildatei durchgehen, um einen bestimmten HEX-Farbwert zu finden und ihn durch einen anderen zu ersetzen? Oder greifen Sie auf eine Taschenrechneranwendung zurück, die Sie nicht immer zur Hand haben, um die Spaltenbreite für eine mehrspaltige Vorlage zu berechnen?
SASS verfügt über Tools, die Ihnen diese Routine abnehmen. Diese beinhalten Variablen, Schleimaal, nisten Und Selektorvererbung.
Grundsätzlich ähnelt SASS-Code CSS, ist jedoch grundlegend Besonderheit Was sofort auffällt, ist das Fehlen eines Semikolons nach jedem Eigenschafts-Wert-Paar und das Fehlen von geschweiften Klammern.
Nehmen wir als Beispiel den folgenden CSS-Code:
#skyscraper_ad
{
Bildschirmsperre;
Breite: 120px;
Höhe: 600px;
}
#leaderboard_ad
{
Bildschirmsperre;
Breite: 728px;
Höhe: 90px;
}
Was diesem SASS entspricht:
#skyscraper_ad
Bildschirmsperre
Breite: 120px
Höhe: 600px
#leaderboard_ad
Bildschirmsperre
Breite: 728px
Höhe: 90px
SASS verwendet einen Abstand (Einrückung am Anfang der nächsten Zeile) von zwei Leerzeichen, um die Verschachtelung von Codefragmenten anzuzeigen. ( *Im letzten Snippet habe ich diese Bereiche der Übersichtlichkeit halber mit einem roten Hintergrund hervorgehoben.)
Nachdem wir nun eine Vorstellung davon haben, wie SASS-Code erstellt wird, schauen wir uns die Probleme an, die dazu führen exzellent.
Variablen.
Um in SASS eine Variable zu deklarieren, müssen Sie ihrem Namen das Dollarsymbol $ voranstellen. Und wenn der Name Ihrer Variablen beispielsweise rot ist, können wir nach dem Doppelpunkt den folgenden entsprechenden Wert angeben:
SASS verfügt über integrierte Funktionen wie Abdunkeln und Aufhellen, mit denen die Werte dieser Variablentypen geändert werden können.
Im folgenden Beispiel ist die Schriftfarbe in Absätzen also ebenfalls rot, jedoch dunkler als in h1-Überschriften:
$rot: #FF4848
$Schriftgröße: 12px
h1
Farbe: $rot
P
Farbe: dunkler ($rot, 10 %)
Sie können arithmetische Operationen mit Variablen wie Addition und Subtraktion durchführen, sofern die verwendeten Werte vom gleichen Datentyp sind. Wenn wir beispielsweise einen dunkleren Farbton anwenden möchten, müssen wir lediglich von dem bereits im Code verwendeten, in einer Variablen gespeicherten Farbwert einen kleinen hexadezimalen HEX-Wert subtrahieren, der beispielsweise #101 entspricht. Das Gleiche gilt für den Fall, dass es notwendig ist, den Wert der Schriftgröße zu ändern, beispielsweise um 10 Pixel zu erhöhen; dazu fügen wir einfach die fehlenden Pixel hinzu:
p.addition_and_subtraction
Farbe: $rot - #101
Schriftgröße: $fontsize + 10px
Verschachtelung.
In SASS gibt es zwei Arten der Verschachtelung.
Verschachtelung von Selektoren.
Dies ist die erste Art der Verschachtelung, die derjenigen ähnelt, die zur Strukturierung von HTML-Code verwendet wird:
$Schriftgröße: 12px
Lautsprecher
.Name
Schriftart:
Gewicht: fett
Größe: $fontsize + 10px
.Position
Schriftart:
Größe: $fontsize
Wenn Sie sich den resultierenden CSS-Code ansehen, sind Kommentare überflüssig. Durch die Verschachtelung der .name-Klasse innerhalb der .speaker-Klasse ( *auf die gleiche Weise – mit zwei Leerzeichen am Anfang der nächsten Zeile) wird der CSS-Selektor .speaker.name erstellt. Dasselbe gilt für den folgenden Klassennamen .position , der sich nach der Eigenschaftsdeklaration für den ersten Selektor befindet, was zu einer Verschachtelung des zweiten Selektors .speaker.position führt:
Sprechername(
Schriftdicke: fett;
Schriftgröße: 22px; )
.Lautsprecherposition (
Schriftgröße: 12px; )
Verschachtelung von Eigenschaften.
Mit der zweiten Verschachtelungsart können Sie Eigenschaften mit einem Präfix (*) strukturieren. Schriftfamilie, Schriftgröße, Schriftstärke oder Rahmenstil, Rahmenfarbe, Rahmenradius usw.):
$Schriftgröße: 12px
Lautsprecher
.Name
Schriftart:
Gewicht: fett
Größe: $fontsize + 10px
.Position
Schriftart:
Größe: $fontsize
Im obigen Beispiel verwenden wir die Deklaration der übergeordneten, generischen Eigenschaft „font:“ und weiter Neue Zeile Nach einer zweizeiligen Einrückung geben wir den zweiten Teil der Eigenschaft an, der normalerweise nach dem Bindestrich steht.
Das heißt, wenn wir die Eigenschaft „font:“ angeben, in der nächsten Zeile nach zwei Leerzeichen die Eigenschaft „weight:“, dann entspricht dies im Ergebnis der bekannten Eigenschaft „font-weight“.
Sprechername(
Schriftdicke: fett;
Schriftgröße: 22px; )
.Lautsprecherposition (
Schriftgröße: 12px; )
Das Modul bietet Unterstützung für alle Eigenschaften, die Bindestriche enthalten.
Diese Art der Verschachtelung ist eine großartige Möglichkeit, Ihren CSS-Code zu organisieren und zu strukturieren und unnötige Wiederholungen zu vermeiden. ( *TROCKEN- „Wiederholen Sie sich nicht“ – „Wiederholen Sie sich nicht.“ Situationen, in denen bei der CSS-Formatierung bestimmter Elemente deren Stile an anderen Stellen wiederholt und/oder überschrieben werden, was die Lesbarkeit und Wartung des Codes erschwert).
Hagfish.
Ein weiteres großartiges Feature von SASS ist Schleimaal.
Mit Mixins können Sie ganze Zahlen wiederverwenden SASS-Fragmente Code eingeben und bei Bedarf sogar Argumente an sie übergeben. Und was noch wichtiger ist: Sie können auch deren Originalwerte angeben.
Um ein Mixin zu definieren, verwenden Sie etwas, das speziell in SASS reserviert ist Stichwort@mixin , gefolgt vom von Ihnen gewählten Mixin-Namen. Wenn Argumente erforderlich sind, geben Sie diese in Klammern an. Die Standardwerte für das Argument werden bei der Definition des Mixins angegeben, getrennt durch einen Doppelpunkt. ( *Mit anderen Worten, Mixins sind CSS-Funktionen.)
Das Verfahren zur Verwendung von Mixins ist sehr einfach: Geben Sie nach dem Schlüsselwort @include den Namen des gewünschten Mixins an und listen Sie die erforderlichen Parameter, falls vorhanden, in Klammern auf.
Schauen Sie sich das folgende Beispiel an:
@mixin border-radius($amount: 5px) /* definiere das Mixin */
-moz-border-radius: $amount
-webkit-border-radius: $amount
Randradius: $amount
h1 /* Mixin verwenden */
@include border-radius(2px)
Lautsprecher
@include Randradius
Dieses SASS wird nach der Kompilierung in den folgenden CSS-Code umgewandelt:
h1 (
-moz-border-radius: 2px;
-webkit-Grenzradius: 2px;
Randradius: 2x; )
Lautsprecher (
-moz-border-radius: 5px;
-webkit-Grenzradius: 5px;
Randradius: 5px; )
Für den h1-Header haben wir explizit den Randeckenradiuswert angegeben, aber für das Element mit dem Klassennamen .speaker haben wir dies nicht getan, sodass der Standardwert 5px verwendet wurde.
Selektorvererbung.
Ein anderer exzellent Ein Merkmal der SASS-Syntax ist die Fähigkeit von Selektoren, alle für andere Selektoren definierten Stile zu erben. Um diese Funktion nutzen zu können, müssen Sie das Schlüsselwort @extend verwenden, gefolgt von einem Selektor, dessen Eigenschaften Sie erben möchten:
h1
Rand: 4 Pixel fest #ff9aa9
Lautsprecher
@extend h1
Randbreite: 2px
Was wird kompiliert zu:
h1,.Lautsprecher (
Rand: 4px fest #ff9aa9; )
Lautsprecher (
Randbreite: 2px; )
(*Beachten Sie, dass die Grenzdeklaration: 4px solid #ff9aa9; wird nicht innerhalb einer Regel mit dem .speaker-Selektor wiederholt, sondern stattdessen wird ein zweiter Selektor zur ersten Regel hinzugefügt. Mit anderen Worten: Es gibt keine Codeduplizierung.)
Probieren Sie SASS in Aktion aus.
Online.
Sie können SASS online erleben, ohne das Modul zuerst auf Ihrem lokalen Computer installieren zu müssen.
Bevor Sie jedoch mit dem Experimentieren beginnen, wählen Sie unten auf der Seite die Option aus „Eingerückte Syntax“.
Auf dem PC installiert.
SASS selbst ist eine Anwendung (Gem) der Ruby-Plattform. Um es zu installieren, können Sie daher nicht darauf verzichten, zunächst die Plattform selbst und den Paketmanager dieser Programmiersprache RubyGems zu installieren. Führen Sie nach erfolgreicher Installation der Plattform selbst und des Managers den folgenden Befehl in der Konsole aus:
gem sass installieren
Das SASS-Modul kann als Tool zum Konvertieren Ihrer SASS-Dateien in Dateien im CSS-Format im Befehlszeilenmodus verwendet werden.
Dies kann beispielsweise durch die Eingabe des folgenden Befehls erfolgen:
sass --watch sass_folder:stylesheets_folder
Dabei ist sass_folder der Pfad zu dem Ordner, der SASS-Dateien enthält (d. h. mit der Erweiterung .sass), und stylesheets_folder ist der Pfad zu dem Ordner, in dem die resultierenden CSS-Dateien nach der Kompilierung gespeichert werden. Der Befehl --watch teilt dem Modul mit, dass es auf Änderungen im angegebenen Ordner achten und, falls vorhanden, nach dem Speichern die ursprünglichen .sass-Dateien in entsprechende .css-Dateien konvertieren soll.
Umgekehrte Konvertierung von CSS in SASS.
Sie können mit der Verwendung von SASS beginnen, indem Sie die in Ihren vorhandenen Projekten verwendeten Stile mit dem Dienstprogramm „sass-convert“ in dieses Format konvertieren.
Geben Sie dazu in der Befehlszeile den Pfad zu dem Ordner ein, dessen Inhalt konvertiert werden soll ( *Das heißt, gehen Sie einfach in das gewünschte Verzeichnis, in dem sie sich befinden Quelldaten ). Führen Sie dann das oben genannte Dienstprogramm aus und geben Sie ihm die folgenden Parameter:
sass-convert --from css --to sass –R.
Dabei gibt das Flag -R die rekursive Art der Ausführung der Operation an. Und der nächste Punkt danach. bedeutet, dass die resultierenden .sass-Dateien im aktuellen Verzeichnis gespeichert werden. ( *Bei Bedarf können Sie anstelle eines Punktes den Pfad zu dem Ordner angeben, in dem Sie die resultierenden Dateien speichern möchten.)