Eine einfache und einfache Anleitung zum Verständnis von Sass

Vor einiger Zeit hat Thoriq Firdaus einen großartigen Artikel über den Einstieg in Sass geschrieben, in dem gezeigt wurde, wie man diese äußerst nützliche CSS-Präprozessor-Sprache installiert und verwendet (Sie sollten sie vielleicht einmal ausprobieren, wissen Sie, um anzufangen).

In diesem Artikel dachte ich, ich würde Ihnen ein wenig mehr Einblick geben, was Sie mit Sass tun können und wie Entwickler es jeden Tag verwenden, um besseren und modulareren CSS-Code zu erstellen. Fahren Sie mit dem gewünschten Abschnitt fort:

• Werkzeuge des Handels
• Variablen
• Verschachtelung
• Regelsätze erweitern
• Mixins
• Platzhalter-Selektoren
• Operationen
• Funktionen

Werkzeuge des Handels

Thoriq zeigte Ihnen, wie Sie Sass von der Befehlszeile aus mit Hilfe von verwenden können Sass - Uhr Befehl.

Wenn Sie GUI-Tools bevorzugen, können Sie auf meine persönliche Lieblings-App Codekit zurückgreifen, ein Webentwickler-Tool zum Kompilieren von Sass, Verketten, Autoprefixing und vielem mehr. Prepros ist eine weitere sehr leistungsfähige Anwendung, die auf allen Systemen verwendet werden kann. Beide sind bezahlte Anträge Aber es lohnt sich, wenn Sie sie auf lange Sicht einsetzen.

Wenn Sie nur Sass ausprobieren möchten ohne etwas zu bezahlen Sie können das Terminal oder Koala (hier ist unser Testbericht) verwenden, eine kostenlose, plattformübergreifende, funktionsreiche App, die sich gegen Premium-Partner behaupten kann.

Variablen

Eines der ersten Dinge, die Sie benötigen, um Ihren Kopf zu wickeln, sind Variablen. Wenn Sie aus einem PHP- oder einem ähnlichen Hintergrund in der Programmiersprache stammen, ist dies für Sie selbstverständlich. Variablen sind für Speichern von Bits und Teilen wiederverwendbarer Informationen, wie ein Farbwert zum Beispiel:

 $ primary_color: # 666666; .button color: $ primary_color;  .wichtig color: $ primary_color;  

Dies mag hier nicht so nützlich erscheinen, stellen Sie sich jedoch vor, 3.000 Zeilen Code zu haben. Wenn sich Ihr Farbschema ändert, müssen Sie jeden Farbwert in CSS ersetzen. Mit Sass kannst du das einfach Ändern Sie den Wert des $ primary_color variabel und fertig damit.

Variablen werden für verwendet Speichern von Schriftnamen, -größen, -farben und einer Vielzahl anderer Informationen. Bei größeren Projekten sollten wir alle Ihre Variablen in eine separate Datei extrahieren (wir werden uns in Kürze damit befassen). Damit können Sie Ihr gesamtes Projekt neu einfärben und Schriftarten und andere wichtige Aspekte ändern ohne jemals tatsächliche CSS-Regeln zu berühren. Sie müssen lediglich einige Variablen ändern.

Verschachtelung

Eine weitere grundlegende Funktion, die Sass Ihnen gibt, ist die Möglichkeit, Regeln zu verschachteln. Nehmen wir an, Sie bauen ein Navigationsmenü. Du hast ein nav Element, das eine ungeordnete Liste, Listenelemente und Links enthält. In CSS können Sie so etwas tun:

 #header nav / * Regeln für den Nav-Bereich * / #header nav ul / * Regeln für das Menü * / #header nav li / * Regeln für Listenelemente * / #header nav a / * Rules für Links * / 

In den Selektoren wiederholen wir uns viel. Wenn Elemente gemeinsame Wurzeln haben, können wir die Verschachtelung verwenden Schreibe unsere Regeln viel sauberer.

So könnte der obige Code in Sass aussehen:

 #header nav / * Regeln für den Navigationsbereich * / ul / * Regeln für das Menü * / li / * Regeln für Listenelemente * / a / * Regeln für Links * / 

Schachteln ist deshalb äußerst nützlich macht Stylesheets (viel) lesbarer. Durch die Verwendung der Verschachtelung mit der richtigen Einrückung können Sie erreichen gut lesbare Codestrukturen, Auch wenn Sie eine Menge Code haben.

Ein Nachteil der Verschachtelung ist, dass dies möglich ist führen zu unnötiger Spezifität. Im obigen Beispiel habe ich auf Links mit verwiesen #header nav a. Sie könnten auch verwenden #header nav ul li a das wäre wohl zu viel.

In Sass ist es viel einfacher, sehr spezifisch zu sein, da Sie lediglich Ihre Regeln verschachteln müssen. Das Folgende ist weitaus weniger lesbar und ziemlich spezifisch.

 #header nav / * Regeln für den Navigationsbereich * / ul / * Regeln für das Menü * / li / * Regeln für Listenelemente * / a / * Regeln für Links * / 

Regelsätze erweitern

Das Erweitern ist bekannt, wenn Sie mit objektorientierten Sprachen arbeiten. Es ist am besten durch ein Beispiel zu verstehen. Lassen Sie uns 3 Knöpfe erstellen, die geringfügige Abweichungen voneinander sind.

 .Taste Anzeige: Inline-Block; Farbe: # 000; Hintergrund: # 333; Grenzradius: 4px; Polsterung: 8px 11px;  .button-primary @extend .button; Hintergrund: # 0091C2 .button-small @extend .button; Schriftgröße: 0.9em; Polsterung: 3px 8px;  

Das .Taste-Primär und .knopf klein Klassen erweitern alle .Taste Klasse, was bedeutet, dass sie alle Eigenschaften annehmen und dann ihre eigenen definieren.

Dies ist sehr nützlich in vielen Situationen, in denen Variationen eines Elements verwendet werden können. Meldungen (Warnung / Erfolg / Fehler), Schaltflächen (Farben, Größen), Menütypen usw. könnten alle die Erweiterungsfunktion für eine hohe CSS-Effizienz nutzen.

Eine Einschränkung ist, dass Sie funktionieren nicht in Medienabfragen wie man es erwarten würde Dies ist zwar etwas fortgeschrittener, aber Sie können alles über dieses Verhalten in Platzhalterauswahl verstehen verstehen. Platzhalterauswahl ist eine spezielle Art von Erweiterung, über die wir in Kürze sprechen werden.

Mixins

Mixins sind eine weitere beliebte Funktion von Präprozessor-Benutzern. Mixins sind wiederverwendbare Regelsätze - ideal für herstellerspezifische Regeln oder für die Abkürzung langer CSS-Regeln.

So erstellen Sie eine Übergangsregel für Hover-Elemente:

 @mixing hover-effect -Webkit-Übergang: Hintergrundfarbe 200ms; -Moz-Übergang: Hintergrundfarbe 200ms; -o-Übergang: Hintergrundfarbe 200 ms; Übergang: Hintergrundfarbe 200ms;  ein @include Hover-Effekt;  .button @include hover-effect;  

Mit Mixins können Sie auch Variablen für verwenden Definiere die Werte innerhalb des Mixins. Wir könnten das obige Beispiel in umschreiben geben Sie uns die Kontrolle über den genauen Zeitpunkt des Übergangs. Wir möchten, dass Schaltflächen zum Beispiel ein wenig langsamer wechseln.

 @mixin hover-effect ($ speed) -webkit-Übergang: Hintergrundfarbe $ speed; -Moz-Übergang: Hintergrundfarbe $ Geschwindigkeit; -o-Übergang: Hintergrundfarbe $ speed; Übergang: Hintergrundfarbe $ Geschwindigkeit;  einen @include-Hover-Effekt (200ms);  .button @include Hover-Effekt (300ms);  

Platzhalter-Selektoren

Platzhalter-Selektoren wurden mit Sass 3.2 eingeführt und ein Problem gelöst, durch das der generierte CSS-Code etwas aufgebläht werden konnte. Schauen Sie sich diesen Code an, der Fehlermeldungen erzeugt:

 .Nachricht Schriftgröße: 1.1em; Polsterung: 11px; Randbreite: 1px; Bordüre: solide;  .message-danger @extend .message; Hintergrund: # C20030; Farbe: #fff; Rahmenfarbe: # A8002A;  .message-success @extend .message; Hintergrund: # 7EA800; Farbe: #fff; Rahmenfarbe: # 6B8F00;  

Es ist sehr wahrscheinlich, dass die Nachrichtenklasse niemals in unserem HTML-Code verwendet wird erstellt, um erweitert zu werden, nicht verwendet, wie es ist. Dies verursacht ein wenig Aufblähen in Ihrem generierten CSS. Um Ihren Code effizienter zu gestalten, können Sie die Platzhalterauswahl verwenden, die mit einem Prozentzeichen gekennzeichnet ist:

 % message font-size: 1.1em; Polsterung: 11px; Randbreite: 1px; Bordüre: solide;  .message-danger @extend% button; Hintergrund: # C20030; Farbe: #fff; Rahmenfarbe: # A8002A;  .message-success @extend% button; Hintergrund: # 7EA800; Farbe: #fff; Rahmenfarbe: # 6D9700;  

An dieser Stelle fragen Sie sich vielleicht, was der Unterschied zwischen Extents und Mixins ist. Wenn Sie Platzhalter verwenden, verhalten sie sich wie ein Mixer ohne Parameter. Das stimmt, aber die Ausgabe in CSS unterscheidet sich. Der Unterschied ist das Mixins duplizieren Regeln während Platzhalter sorgen dafür, dass dieselben Regeln Selektoren verwenden, was am Ende zu weniger CSS führt.

Operationen

Es ist schwer, dem Wortspiel hier zu widerstehen, aber ich verzichte vorerst auf medizinische Witze. Operatoren erlauben es Ihnen, etwas in Ihren CSS-Code einzugreifen und können sehr hilfreich sein. Das Beispiel im Sass-Führer ist perfekt, um dies zu zeigen:

 .Behälter Breite: 100%;  article float: left; Breite: 600px / 960px * 100%;  beiseite float: right; Breite: 300px / 960px * 100%;  

Das obige Beispiel erstellt ein 960px-basiertes Rastersystem mit minimalem Aufwand. Es wird gut in das folgende CSS kompiliert:

 .Behälter Breite: 100%;  article float: left; Breite: 62,5%;  beiseite float: right; Breite: 31,25%;  

Eine große Verwendung für Operationen ist das Mischen von Farben. Wenn Sie sich die Erfolgsmeldung Sass oben ansehen, ist nicht klar, dass die Farbe des Hintergrunds und der Umrandung eine Art Beziehung haben. Durch Abzug eines Graustufen können wir die Farbe dunkler machen und die Beziehung sichtbar machen:

 $ primary: # 7EA800; .message-success @extend% button; Hintergrund: $ primary; Farbe: #fff; Rahmenfarbe: $ primary - # 111;  

Je heller die subtrahierte Farbe ist, desto dunkler wird der resultierende Farbton. Je heller die hinzugefügte Farbe, desto heller ist der resultierende Farbton.

Funktionen

Es gibt eine Vielzahl von Funktionen, die verwendet werden können: Zahlenfunktionen, Zeichenfolgenfunktionen, Listenfunktionen, Farbfunktionen und mehr. Schauen Sie sich die lange Liste in der Entwicklerdokumentation an. Ich werde mir hier ein paar ansehen, um Ihnen zu zeigen, wie sie funktionieren.

Das erleichtern und verdunkeln Mit dieser Funktion können Sie die Helligkeit einer Farbe ändern. Dies ist besser als das Abziehen von Schattierungen. Dadurch wird alles noch modularer und offensichtlicher. Sehen Sie sich unser vorheriges Beispiel mit der Verdunkelungsfunktion an.

 $ primary: # 7EA800; .message-success @extend% button; Hintergrund: $ primary; Farbe: #fff; Rahmenfarbe: dunkler ($ primary, 5);  

Das zweite Argument der Funktion ist der Prozentsatz der erforderlichen Abdunkelung. Alle Funktionen haben Parameter; Schauen Sie sich die Dokumentation an, um zu sehen, was sie sind! Hier einige weitere selbsterklärende Farbfunktionen: entsättigen, sättigen, umkehren, Graustufen.

Das ceiling Funktion gibt wie in PHP eine auf die nächste ganze Zahl gerundete Zahl zurück. Dies kann zum Berechnen von Spaltenbreiten verwendet werden, oder wenn Sie im letzten CSS nicht viele Dezimalstellen verwenden möchten.

 .title font-size: ceil ($ Überschriftgröße * 1.3314);  

Überblick

Die Funktionen in Sass geben uns die Möglichkeit, mit weniger Aufwand besser CSS zu schreiben. Die richtige Verwendung von Mixins, Erweiterungen, Funktionen und Variablen macht unsere Stylesheets leichter zu pflegen, lesbarer und einfacher zu schreiben.

Wenn Sie sich für einen anderen ähnlichen CSS-Präprozessor interessieren, schlage ich vor, LESS (oder den Leitfaden für Anfänger) zu lesen - der zugrunde liegende Prinzip ist derselbe!