Sass bringt Standard-Programmierfunktionen in CSS

Wenn Sie mehr CSS entwickeln, wird die Verwaltbarkeit der Dateien und Elemente zu einem Problem. Erstellen Sie beispielsweise ein großes Stylesheet oder teilen Sie es in kleinere Dateien auf, wodurch Fragen zur Verzeichnisstruktur usw. gestellt werden? Syntactically Awesome Stylesheets (Sass) vereinfachen neben vielen anderen Dingen die Dateiverwaltung (Ressourcen?).

Sass kommt mir bekannt vor

Sass wurde von Hampton Catlin erstellt, der uns auch Haml für die HTML-Entwicklung brachte. Ruby-Entwickler werden Sass gut kennen, da es eine Standardfunktion von Ruby on Rails ist. Sass verwendet für JavaScript-Entwickler dieselbe Prämisse wie TypeScript, LESS und sogar CoffeeScript.

Wenn Sie Sass verwenden, entwickeln Sie Ihr CSS als Sass-formatierte Dateien. Der Sass-Präprozessor oder -Compiler akzeptiert Sass-formatierten Code und generiert Standard-CSS.

Was Sass auf den Tisch bringt

Sass hat zu viele Funktionen, um sie in diesem Artikel aufzulisten. Schauen wir uns also die beeindruckenderen Funktionen an, die es für die CSS-Entwicklung bietet.

Nisten

Einer der mühsamen Aspekte von CSS besteht darin, bei der Arbeit mit untergeordneten Selektoren immer wieder denselben Selektor zu verwenden. Mit Sass können Sie untergeordnete Selektoren innerhalb des gemeinsam genutzten übergeordneten Elements verschachteln. Das folgende Snippet demonstriert diese Funktion, indem Selektoren für die Listenelemente in der ungeordneten Liste innerhalb eines Selektors angegeben werden.

 #navbar ul {Rand links: 20px; Rand rechts: 20px; Farbe: #FFF; .li {Hintergrundfarbe: #CCC; }} 

Variablen

Diese Funktion bringt eine Standardprogrammierfunktion in CSS - Sie können Werte definieren, die in einem Stylesheet wiederverwendet werden können. Sie deklarieren eine Variable genau wie eine Eigenschaft, außer dass Sie das Dollarzeichen ($) für Variablennamen verwenden. Mathematische Operationen können auch für Variablen verwendet werden. Darüber hinaus können Variablen in Eigenschaftsnamen und Selektoren im folgenden Format verwendet werden: # {$ Variablenname} (Sass nennt diese Interpolation). Sass unterstützt sechs grundlegende Datentypen: Zahlen, Textzeichenfolgen, Farben, Boolesche Werte, Nullen und Listen (durch Leerzeichen oder Kommas getrennte Werte).

 $ standardColor: # C0C0C0; .h1 {Hintergrundfarbe: $ standardColor; }} 

Mixins

Diese Funktion erleichtert die Wiederverwendung von Stilen oder Selektoren - Sie können sie sich als erweiterte Variable vorstellen. Grundsätzlich definieren Sie CSS und weisen ihm mit der Direktive @mixin einen Namen zu. Das Mixin kann über die @ include-Direktive im gesamten Code wiederverwendet werden. Die Kraft der Mixins hört hier nicht auf, da sie auch die Verwendung von Parametern ermöglicht. Mit diesen können Sie Variablen (die Parameter) innerhalb des durch das Mixin definierten Blocks verwenden.

Ich habe mir den Kopf zerbrochen, um ein Beispiel zu finden, aber ich habe mich entschlossen, das großartige Beispiel auf der Sass-Site zu verwenden, das einige Mixins definiert, die für die Datenauswahl verwendet werden.

 @mixin table-base {th {text-align: center; Schriftdicke: fett; } td, th {padding: 2px}} @mixin left ($ dist) {float: left; Rand links: $ dist; } #data {@include left (10px); @include table-base; }} 

Importieren

Dies ist eine weitere Standardprogrammierfunktion, die Sass für CSS bereitstellt. Mit Import können Sie große Stylesheets in kleinere, besser verwaltbare Dateien aufteilen. Die @ import-Direktive wird verwendet, um andere Sass-Dateien zu referenzieren oder zu importieren. Während sich Importanweisungen normalerweise oben in einer Sass-Datei befinden, können Sie sie an einer beliebigen Stelle in einer Datei platzieren. Hier ist die grundlegende Syntax.

 @import "Dateiname ohne Erweiterung"; 

Erweitern

Sie können einen Selektor als Basis für einen anderen verwenden. Grundsätzlich erweitert der zweite Selektor den ersten, sodass er alle Funktionen des ersten Selektors sowie das, was in seinem eigenen Element definiert ist, aufweist.
 .baseSelector {Farbe: # 000; Rand: 1px; } .extendSelector {@extend .baseSelector; @ Hintergrundfarbe: #fff; }} 

Kommentieren

Sass unterstützt mehrzeilige und einzeilige Kommentare, die mit der Standard-CSS-Syntax (/ * comment * /) sowie dem Sass-spezifischen einzeiligen Kommentar (// comment) erstellt werden können.

Verwenden von Sass als Befehlszeilenprogramm

Sass ist als Befehlszeilentool, Ruby-Modul oder Plugin für ein Rack-fähiges Framework verfügbar (denken Sie an Ruby on Rails). Ich konzentriere mich auf die Befehlszeilenoption in diesem Artikel.

Sie beginnen mit der Installation von Sass gem: gem install sass (Windows-Benutzer müssen zuerst Ruby installieren). Abbildung A zeigt die Installation auf meinem MacBook Pro.

Abbildung A.

Sass unter OS X installieren

Nach der Installation können Sie über die Befehlszeile Ihren Sass-Code mit dem CSS-Gegenstück kompilieren. Dies wird erreicht, indem der Befehl sass gefolgt vom Eingabedateinamen und dem Ausgabedateinamen wie folgt ausgeführt wird:

 sass inputFile.scss outputFile.css 

Die scss-Dateierweiterung ist Standard für Sass. Eine coole Funktion ist, dass Sie Sass auf Änderungen an Ihrer scss-Datei achten lassen können. Wenn Änderungen auftreten, wird das entsprechende CSS automatisch aktualisiert. Dies wird mit dem Befehlszeilenparameter watch erreicht (zwei Striche gefolgt vom Schlüsselwort watch).

 sass --watch inputFile.scss: outputFile.css 

Abbildung B zeigt den Befehl in Aktion. Beachten Sie, dass ich den Befehl beim ersten Mal falsch eingegeben habe (es fehlte der Doppelpunkt). Mit dem Schalter –help (sass –help) können Sie eine vollständige Liste der Sass-Befehlszeilenoptionen abrufen.

Abbildung B.

Kompilieren und Ansehen einer scss-Datei

Welches Tool ist besser?

Mein erstes Projekt mit Ruby führte mich in Sass ein. Ich kann sehen, warum Entwickler Sass lieben. Es bringt viele Entwicklungsfunktionen in die wilde Welt von CSS. Sass ist jedoch nur eine weitere Option in der Mischung von Tools wie CoffeeScript, LESS und TypeScript. Welche sollten Sie also verwenden?

Ich habe WENIGER in einer Bootstrap-basierten Anwendung und den anderen Tools als Testfahrten verwendet, und alle scheinen nützliche Funktionen und ziemlich viele Überlappungen zu haben. Ich denke, welches Werkzeug Sie gegebenenfalls verwenden, hängt von den Werkzeugen ab, die Sie verwenden. Zum Beispiel werden Microsoft-Entwickler wahrscheinlich TypeScript verwenden, Ruby-Entwickler werden Sass wählen und so weiter. Ich werde wahrscheinlich bei WENIGER bleiben, weil ich ein großer Bootstrap-Unterstützer bin.

Mögen Sie Tools, die CSS konsistent machen? Wenn ja, welches Tool bevorzugen Sie? Lass es uns in der Diskussion wissen.


© Copyright 2021 | mobilegn.com