Was ist Sass? Ihr Leitfaden zu diesem Top-CSS-Präprozessor

Was ist Sass?
(Bildnachweis: Sass)

Was ist Sass? Das ist die Frage, die wir hier beantworten wollen. Wenn Sie mit Webdesign noch nicht vertraut sind, haben Sie wahrscheinlich gehört, dass der Begriff im Umlauf ist, aber Sie sind möglicherweise nicht ganz auf dem neuesten Stand, was Sass ist, was es tut und ob Sie es verwenden sollten oder nicht. Kurz gesagt, Sass ist ein CSS-Präprozessor, der dem regulären CSS spezielle Funktionen wie Variablen, verschachtelte Regeln und Mixins (manchmal auch als syntaktischer Zucker bezeichnet) hinzufügt. Ziel ist es, den Codierungsprozess einfacher und effizienter zu gestalten. Lassen Sie uns genauer untersuchen.

Weitere Tools finden Sie in unserem Leitfaden zum beste CSS-Frameworks und die Spitze Webdesign-Tools versuchen.

Was ist ein CSS-Präprozessor?

Ein CSS-Präprozessor ist eine Skriptsprache, die CSS erweitert, indem Entwickler Code in einer Sprache schreiben und dann in CSS kompilieren können. Sass ist derzeit vielleicht der beliebteste Präprozessor, aber auch andere bekannte Beispiele sind Weniger und Stift .



Bevor wir weiter gehen, ist eine kurze Ankündigung des öffentlichen Dienstes angebracht: Die meisten Webdesigner würden sagen, dass Sie Sass (oder Präprozessoren, Erweiterungen oder Frameworks) besser meiden sollten, wenn Sie noch nicht mit CSS vertraut sind, solange Sie noch da sind Lernen. Es ist zwar richtig, dass sie viele Vorteile in Bezug auf Geschwindigkeit und Effizienz bieten, aber es ist wichtig, dass Sie sich wirklich mit den Grundlagen von CSS vertraut machen. Stellen Sie sicher, dass Sie die Kernkonzepte kennen, bevor Sie Verknüpfungen und verwirrende Dinge untersuchen.

Was ist Sass?

Sass

Sass ist wohl die nützlichste aller CSS-Erweiterungen

Sass (steht für 'Syntactically awesome style Sheets') ist eine Erweiterung von CSS, mit der Sie beispielsweise Variablen, verschachtelte Regeln, Inline-Importe und mehr verwenden können. Es hilft auch, die Dinge zu organisieren und Stylesheets schneller zu erstellen.

Sass ist mit allen CSS-Versionen kompatibel. Die einzige Voraussetzung für die Verwendung ist, dass Ruby installiert sein muss. Benutzer werden außerdem gebeten, den Anweisungen zu folgen Sass Community-Richtlinien .

Wie benutzt man Sass?

Im folgenden Abschnitt werden einige grundlegende Tipps zur Verwendung von Sass anhand von Beispielen von der offiziellen Sass-Website beschrieben. Schauen Sie sich das an Sass-Dokumentation für zusätzliche Referenzen und Beispiele.

Syntax

Sass enthält zwei Syntaxoptionen:

  • SCSS (Sassy CSS): Verwendet die .scss Dateierweiterung und ist vollständig kompatibel mit der CSS-Syntax
  • Eingedrückt (einfach 'Sass' genannt): Verwendet .sass Dateierweiterung und Einrückung statt Klammern; Es ist nicht vollständig mit der CSS-Syntax kompatibel, aber es ist schneller zu schreiben

Beachten Sie, dass Dateien mithilfe von mit von einer Syntax in die andere konvertiert werden können sass-konvertieren Befehl.

Variablen

Genau wie in anderen Programmiersprachen ermöglicht Sass die Verwendung von Variablen, in denen Informationen gespeichert werden können, die Sie in Ihrem Stylesheet verwenden können. Sie können beispielsweise einen Farbwert in einer Variablen oben in der Datei speichern und diese Variable dann beim Festlegen der Farbe Ihrer Elemente verwenden. Auf diese Weise können Sie Ihre Farben schnell ändern, ohne jede Zeile einzeln ändern zu müssen.

Zum Beispiel:

Was macht das Brennwerkzeug in Photoshop?
$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }

Das folgende CSS wird erstellt:

body { font: 100% Helvetica, sans-serif; color: #333; }

Nisten

Nesting ist ein zweischneidiges Schwert. Es bietet zwar eine hervorragende Methode, um die Menge an Code zu reduzieren, die Sie schreiben müssen, kann aber auch zu überqualifiziertem CSS führen, wenn es nicht sorgfältig ausgeführt wird. Die Idee ist, Ihre CSS-Selektoren so zu verschachteln, dass sie Ihre HTML-Hierarchie nachahmen.

Das Folgende zeigt einen grundlegenden Navigationsstil, der die Verschachtelung verwendet:

nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }

Die CSS-Ausgabe lautet wie folgt:

nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }

Teilweise

Partials sind kleinere Sass-Dateien, die in andere Sass-Dateien importiert werden können (siehe nächster Abschnitt). Stellen Sie sich Partials als Code-Schnipsel vor. Mit diesen Codefragmenten kann Ihr CSS jetzt modular aufgebaut und einfacher gewartet werden. Ein Teil wird als solcher bezeichnet, indem er mit einem führenden Unterstrich benannt wird: _partial.scss .

Importieren

Wird mit Partials verwendet (siehe vorherigen Abschnitt) @importieren Mit der Direktive können Sie Ihre Teildateien in die aktuelle Datei importieren, um eine einzelne CSS-Datei zu erstellen. Beachten Sie, wie viele Importe, die Sie als HTTP-Anforderung verwenden, für jeden Import generiert werden.

// _reset.scss html, body, ul, ol { margin: 0; padding: 0; }// basefile.scss @import 'reset'; body { font: 100% Helvetica, sans-serif; background-color: #efefef; }

Und die entsprechende CSS-Ausgabe:

html, body, ul, ol { margin: 0; padding: 0; } body { font: 100% Helvetica, sans-serif; background-color: #efefef; }

Hinweis: Beim Importieren von Partials müssen Sie weder die Dateierweiterung noch den Unterstrich angeben.

Mixins

Einer der Vorteile der Verwendung von Präprozessoren ist ihre Fähigkeit, komplexen, langwierigen Code zu verwenden und zu vereinfachen. Hier kommen Mixins zum Einsatz!

wie man sich wiederholende Muster in Photoshop macht

Wenn Sie beispielsweise die Herstellerpräfixe einfügen müssen, können Sie stattdessen ein Mixin verwenden. Schauen Sie sich dieses Beispiel an für Randradius ::

@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); }

Beachten Sie die @mixin Richtlinie an der Spitze. Es wurde der Name gegeben Randradius und verwendet die Variable $ Radius als sein Parameter. Diese Variable wird verwendet, um den Radiuswert für jedes Element festzulegen.

Später wurde die @einschließen Direktive wird zusammen mit dem Mixin-Namen aufgerufen ( Randradius ) und einen Parameter ( 10px ). So .box {@include border-radius (10px); }} .

Das folgende CSS wird erstellt:

.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }

Erweitern / Vererbung

Das @erweitern Die Richtlinie wurde als eine der mächtigsten Funktionen von Sass bezeichnet. Nachdem Sie es in Aktion gesehen haben, ist klar, warum.

Die Idee ist, dass Sie mit dieser Direktive nicht mehrere Klassennamen in Ihre HTML-Elemente aufnehmen müssen und Ihren Code trocken halten können (wiederholen Sie sich nicht). Ihre Selektoren können die Stile anderer Selektoren erben und bei Bedarf problemlos erweitert werden. Das ist mächtig.

Betreiber

Wenn Sie Berechnungen in Ihrem CSS durchführen können, können Sie mehr tun, z. B. Pixelwerte in Prozentsätze konvertieren. Sie haben Zugriff auf Standard-Mathematikfunktionen wie Addition, Subtraktion, Multiplikation und Division. Natürlich können diese Funktionen kombiniert werden, um komplexe Berechnungen zu erstellen.

Darüber hinaus enthält Sass einige eingebaute Funktionen um Zahlen zu manipulieren. Funktionen wie Prozentsatz() , Fußboden() und runden() um ein paar zu nennen.

Weiterlesen: