Ich habe in letzter Zeit viel über Sass geschrieben, aber durch einige aktuelle Kommentare wurde mir klar, dass nicht jeder ein klares Verständnis davon hat, was Sass ist. Lassen Sie uns etwas klarer sein:
Wenn wir von Sass sprechen, meinen wir normalerweise den Präprozessor und die Sprache als Ganzes. Wir sagen zum Beispiel: „Wir verwenden Sass“ oder „Hier ist ein Sass-Mixin“.
Mittlerweile erlaubt Sass (der Präprozessor) zwei verschiedene Syntaxen:
- Sass, auch bekannt als eingerückte Syntax;
- SCSS, CSS-ähnliche Syntax.
Sass war ursprünglich Teil eines anderen Präprozessors, Haml, der von Ruby-Entwicklern erfunden und geschrieben wurde.
Daher verwendeten Sass-Stile eine Ruby-ähnliche Syntax, keine Klammern, keine Semikolons und keine strikte Einrückung, wie folgt:
// Variable!primary-color= hotpink // Mixin =border-radius(!radius) -webkit-border-radius= !radius -moz-border-radius= !radius border-radius= !radius .my-element color= !primary-color width= 100% overflow= versteckt .my-other-element +border-radius(5px)
Wie Sie sehen, ist der Unterschied im Vergleich zu normalem CSS spürbar! Selbst wenn Sie ein Sass-Benutzer (Präprozessor) sind, können Sie sehen, dass sich dies stark von dem unterscheidet, was wir gewohnt sind.
Eine Variable wird mit ! bezeichnet. , nicht $ , Wertzuweisungssymbol = , nicht : . Ziemlich ungewöhnlich.
Aber so sah Sass bis zur Version 3.0 aus, die im Mai 2010 veröffentlicht wurde und eine völlig neue Syntax namens SCSS oder Sassy CSS einführte.
Sein Ziel war es, die Sass-Syntax näher an CSS heranzuführen und sie damit besser mit CSS kompatibel zu machen:
// Variable $primary-color: hotpink; // Mixin @mixin border-radius($radius) ( -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; ) .my-element ( color: $primary -color; Breite: 100 %; Überlauf: versteckt; ) .my-other-element ( @include border-radius(5px); )
SCSS ist definitiv näher an CSS als Sass. Die Sass-Entwickler haben hart daran gearbeitet, beide Syntaxen einander anzunähern, indem sie ! (Variablenzeichen) und = (Zuweisungszeichen) auf $ und: aus CSS.
Wenn Sie also ein neues Projekt starten, fragen Sie sich möglicherweise, welche Syntax Sie verwenden sollen. Lassen Sie mich dieses Thema behandeln und die Vor- und Nachteile jeder Syntax erläutern.
Profis Sass-Syntax eingerücktObwohl Ihnen diese Syntax vielleicht etwas seltsam erscheint, enthält sie einige interessante Punkte. Erstens ist es kürzer und einfacher zu tippen. Es gibt keine Klammern oder Semikolons, sie werden nicht benötigt.
Noch besser! Es ist weder @mixin noch @include erforderlich, wenn ein einfaches Symbol: = und + ausreicht.
Außerdem bietet die Sass-Syntax durch die Verwendung von Einrückungen saubere Codierungsstandards. Da eine falsche Einrückung das gesamte .sass-Stylesheet beschädigen kann, besteht der erste Schritt hier darin, sicherzustellen, dass der Code sauber und richtig formatiert ist.
Es gibt nur eine Möglichkeit, Sass-Code zu schreiben: richtig schreiben.
Aber sei vorsichtig! Einrückung hat in Sass einen booleschen Wert. Wenn eine Selektorblockeinrückung angewendet wird, bedeutet dies, dass es sich um einen verschachtelten Selektor handelt.
Zum Beispiel:
Element-a color: hotpink .element-b float: left ... gibt den folgenden CSS-Code aus: .element-a ( color: hotpink; ) .element-a .element-b ( float: left; )
Die einfache Tatsache, dass .element-b um eine Ebene nach rechts verschoben wird, bedeutet, dass dies der Fall ist untergeordnetes Element von .element-a , wodurch der resultierende CSS-Code geändert wird. Seien Sie also vorsichtig mit Einrückungen!
Als Außenstehender denke ich, dass eine einrückungsbasierte Syntax wahrscheinlich eher einem Team zusagen würde, das hauptsächlich mit Ruby/Python arbeitet, als einem Team von PHP/Java-Programmierern (obwohl ich gerne gegenteilige Meinungen hören würde).
Vorteile der SCSS-SyntaxZunächst einmal ist es vollständig CSS-kompatibel. Das bedeutet, dass Sie eine CSS-Datei in .scss umbenennen können und sie funktioniert, als wäre nichts passiert.
Die vollständige Kompatibilität von SCSS mit CSS war seit der Veröffentlichung von SCSS immer eine Priorität für den Sass-Support, und meiner Meinung nach ist dies eine Stärke.
Sie versuchen auch, ein Auge darauf zu haben, was in Zukunft eine gültige CSS-Syntax werden könnte, und diese zu implementieren (daher @directives ).
Da SCSS mit CSS kompatibel ist, ist praktisch keine zusätzliche Schulung erforderlich. Die Syntax ist weitgehend gleich: Schließlich handelt es sich nur um CSS mit einigen Extras.
Dies ist wichtig für neue Entwickler, damit sie schnell mit dem Codieren beginnen können, ohne viel über Sass zu wissen.
Es ist auch besser lesbar, da die spezifischen Konstrukte bereits Sinn ergeben. Wenn Sie @mixin sehen, wissen Sie, dass es sich um eine Mixin-Deklaration handelt. Wenn Sie @include sehen, wissen Sie, dass es sich um einen Mixin-Aufruf handelt.
Es gibt keine Bedingungen und alles ergibt ohne Interpretation einen Sinn.
Auch fast alles vorhandene Werkzeuge, Plugins und Demos für Sass werden mit der SCSS-Syntax entwickelt. Diese Syntax orientiert sich immer mehr an Profis und wird von diesen standardmäßig gewählt (sofern es nicht die einzig mögliche ist).
Hauptsächlich aus den oben genannten Gründen. Beispielsweise wird es immer schwieriger, Hervorhebungen für die reine Sass-Einrückungssyntax zu finden. Im Allgemeinen sind nur SCSS-Hintergrundbeleuchtungsoptionen verfügbar.
AbschlussDie Wahl liegt ohnehin bei Ihnen, aber wenn Sie keinen wirklich zwingenden Grund haben, eingerückte Syntax zu verwenden, würde ich dringend empfehlen, SCSS anstelle von Sass zu verwenden. Es ist nicht nur einfacher, sondern auch bequemer.
Ich habe die Einrückungssyntax einmal ausprobiert und sie hat mir gefallen. Vor allem seine Kürze und Einfachheit. Ich wollte gerade meinen gesamten Arbeitscode auf Sass verschieben, aber in letzter Minute änderte ich meine Meinung.
Ich bin froh, dass ich diesen Schritt nicht getan habe, da es mir jetzt mit einigen Tools sehr schwer fallen würde, mit der eingerückten Syntax zu arbeiten.
Bitte beachten Sie außerdem, dass Sass niemals mit einem Akronym in Großbuchstaben bezeichnet wird, unabhängig davon, ob es sich um eine Syntax oder eine Programmiersprache handelt. Während SCSS immer in Großbuchstaben angegeben wird. Möchten Sie wissen, warum? Schauen Sie sich SassnotSASS.com an!
Die Übersetzung des Artikels „Was ist der Unterschied zwischen Sass und SCSS“ wurde vom befreundeten Projektteam erstellt
Bis ich vor ein paar Monaten eine interessante Situation hatte. CSS war für mich nie ein Problem (obwohl es überhaupt nichts Kompliziertes daran ist), aber ich war von der Idee inspiriert, mithilfe von Variablen so etwas wie Farbauswahllinien für Vorlagen und Websites zu erstellen. Eine Palette mit einer festen Anzahl an Optionen verhindert, dass Farben verwechselt werden und sich vom gewählten Stil abheben.
Woher wissen Sie, wofür Sie LESS und wofür Sass verwenden sollten? Im Prinzip sind sie einander recht ähnlich. Schauen wir sie uns an Allgemeine Charakteristiken:
* Mixins – Klassen für Klassen.
* Parametrische Mixins – Klassen, auf die Sie Funktionstypparameter anwenden können.
* Verschachtelte Regeln – Klassen innerhalb von Klassen, die sich wiederholenden Code abschneiden.
* Operationen – Mathematik innerhalb von CSS.
* Farbfunktionen – Farben bearbeiten.
* Namespaces – Gruppen von Stilen, die über Links aufgerufen werden können.
* Der Umfang ist ein Produkt lokaler Stiländerungen.
* Javascript-Auswertung – in CSS definierte Javascript-Ausdrücke.
Der Hauptunterschied zwischen LESS und Sass besteht in der Art und Weise, wie sie hergestellt werden. LESS befindet sich in der Javascript-Bibliothek und erledigt dementsprechend die Arbeit auf der Client-Seite.
Sass wiederum führt Ruby aus und läuft auf der Serverseite. Viele Entwickler verwenden LESS nicht, weil die Javascript-Engine länger braucht, um den Code zu verarbeiten, was zu geändertem CSS für den Browser führt. Es gibt mehrere Betriebsweisen. Ich verwende es, wenn LESS nur während des Entwicklungsprozesses verwendet wird. Sobald ich fertig bin, kopiere ich das in LESS erzeugte Ergebnis und füge es in den Code-Reduzierer und dann in eine separate CSS-Datei ein, die anstelle der LESS-Dateien eingefügt werden soll. Eine andere Möglichkeit besteht darin, LESS zum Kompilieren und Minimieren Ihrer Dateien zu verwenden. Beide Methoden minimieren das Auffüllen Ihrer Stile und helfen außerdem, Probleme zu vermeiden, die auftreten können, wenn der Browser des Clients kein Javascript unterstützt. Das kommt selten vor, aber diese Möglichkeit kann nicht ausgeschlossen werden.
Bitte beachten Sie auch diese Rezension von Adam Stacoviak, die geschrieben wurde, nachdem der Artikel im Smashing Magazine auf Twitter heftig diskutiert wurde: „Tatsächlich benötigt Sass Ruby, obwohl es nicht in ein CSS-Dokument auf dem Server kompiliert werden muss.“ Sie kann lokal kompiliert werden (wie in LESS angegeben) und diese kompilierte Datei kann zusammen mit Ihrem Projekt, Ihrer WordPress-Vorlage, Ihrer Expression Engine usw. verschoben werden. Da dies das Smashing Magazine ist und die Benutzerbasis sehr unterschiedlich ist, vermute ich, dass viele von Ihnen Macs verwenden. Ruby ist also die Standardeinstellung für alle Mac-Maschinen, Also einfache Installation Mit Sass können Sie sofort loslegen.
Sobald Sie Sass installiert haben, können Sie es lokal in CSS konvertieren und den Code mit Ihrem Projekt versenden, wie ich bereits beschrieben habe. Wenn Sie nicht sicher sind, wie Sie mit Sass (oder Compass) beginnen sollen, haben wir eine ziemlich detaillierte Anleitung mit dem Titel „(Erste Schritte mit Sass oder Compass)“ geschrieben. Lasst uns alle gemeinsam Adam danken!
Weniger mehr!
Installation
LESS lässt sich relativ einfach in jedes Projekt implementieren, an dem Sie arbeiten:
Variablen
Wenn Sie Entwickler sind, gehören Variablen wahrscheinlich Ihnen besten Freunde. Wenn Sie dieselben Informationen (z. B. Farbe) mehrmals verwenden müssen, macht das Festlegen einer Variablen einen großen Unterschied. Auf diese Weise gewährleisten Sie den Zusammenhalt des Dokuments und ersparen sich das ständige Scrollen durch das Dokument auf der Suche nach dem gewünschten Hex-Wert, um ihn zu kopieren und in einem neuen Element zu verwenden. Sie können sogar Spaß daran haben, die zu generierenden Hexadezimalwerte hinzuzufügen oder auszuschließen. Lass uns nehmen dieses Beispiel:
@blue: #00c;
@light_blue: @blue + #333;
@dark_blue: @blue - #333;
Wenn wir diese Stile auf die drei Divs anwenden, erhalten wir einen Abstufungseffekt, der durch Addition und Subtraktion von Werten zu und von natürlichem Blau entsteht:
Übergang von @light_blue zu @blue zu @dark_blue.
Der einzige Unterschied zwischen Variablen in LESS und Sass besteht darin, dass LESS „@“ und Sass „$“ verwendet. Es gibt auch andere Unterschiede, die jedoch nicht so schwer zu erlernen sind.
Mixins
Wenn möglich, können wir einen Stil erstellen, der innerhalb desselben Stylesheet-Dokuments wiederverwendet werden soll. Niemand hindert Sie daran, mehrere Klassen zu verwenden und sie auf Elemente in HTML anzuwenden, aber Sie können dies auch tun, ohne das CSS-Dokument zu schließen. Sie müssen nur WENIGER verwenden. Um dies zu demonstrieren, habe ich Code eingefügt, mit dem Sie zwei Elemente auf einer Seite formatieren können.
Grenze (
border-top: 1px gepunktet #333;
}
artikel.post(
Hintergrund: #eee;
.Grenze;
}
ul.menu (
Hintergrund: #ccc;
.Grenze;
}
Am Ende erhalten Sie etwas Ähnliches, was Sie sich erhofft hatten, wenn Sie zu Ihrem HTML-Dokument zurückkehren und beiden Elementen die Klasse „.bordered“ hinzufügen. Wichtig ist jedoch, dass Sie dies implementiert haben, ohne das CSS-Dokument zu schließen. Es funktioniert so:
Sowohl der Artikel als auch die ungeordnete Liste haben einen gemeinsamen Rahmenstil.
Mit Sass deklarieren Sie „@mixin“ als Stilpriorität, um es als Mixin zu definieren. Als nächstes deklarieren Sie „@include“, um es aufzurufen.
@mixin Grenze (
border-top: 1px gepunktet #333;
}
artikel.post(
Hintergrund: #eee;
@include Grenze;
}
ul.menu (
Hintergrund: #ccc;
@include Grenze;
}
Parametrische Mixins
Ähnlich wie Sie Funktionen in CSS verwenden, diese Funktion kann besonders nützlich für diejenigen sein, die bereitwillig die scheinbar unbegrenzten Möglichkeiten des modernen CSS nutzen. Das beste und nützlichste Beispiel für seine Verwendung sind die vielen Browser-Herstellerpräfixe, die uns beim Übergang von CSS2 zu CSS3 begegnen. Nettuts+, veröffentlicht von Jeffrey Way, einschließlich genaue Informationüber die Implementierung einer Datei, die ausschließlich aus nützlichen parametrischen Mixins besteht. Der Artikel behandelt Ihre bevorzugten CSS3-Optionen mit Herstellerpräfixen. Zum Beispiel ein einfaches Mixin zur Steuerung abgerundeter Ecken in verschiedenen Formen:
Grenzradius(@radius: 3px) (
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
Randradius: @radius;
}
In diesem Fall hat die Klasse „.border-radius“ einen Standardradius von 3 Pixeln, Sie können jedoch einen beliebigen Wert eingeben und abgerundete Ecken erhalten. Beispielsweise rundet „.border-radius(10px)“ die Ecken um 10 Pixel ab.
Die Syntax in Sass ist der von LESS sehr ähnlich. Verwenden Sie einfach „$“ für Variablen und rufen Sie Mixins mit den zuvor erwähnten Methoden „@mixin“ und „@include“ auf.
Selektorvererbung
Schauen wir uns etwas an, das LESS nicht hat. Mit dieser Funktion können Sie einen Selektor auf einen zuvor festgelegten Selektor anwenden, ohne auf ein durch Kommas getrenntes Format zurückgreifen zu müssen.
Speisekarte (
Rand: 1px fest #ddd;
}
Fusszeile (
@extend .menu;
}
/* wird wie folgt gerendert: */
.menu, .footer (
Rand: 1px fest #ddd;
}
Verschachtelte Regeln
Das Verzweigen von Klassen und IDs in CSS ist wahrscheinlich bester Weg Schützen Sie Ihre Cascading Stylesheets vor einer Vermischung oder weisen Sie sie umgekehrt an, mit anderen hinzugefügten Tabellen zu interagieren. Dieser Ansatz kann jedoch häufig eine große Menge Code erfordern. Mit einem Selektor wie „#site-body .post .post-header h2“ erhalten wir sehr gut aussehenden Code, der ziemlich viel Platz einnimmt. Mit LESS können Sie IDs, Klassen und Elemente nach Belieben verzweigen. Anhand des obigen Beispiels könnten Sie etwa Folgendes tun:
#site-body ( ...
Post-Header (...
&:hat besucht ( … )
&:schweben ( … )
}
}
}
}
Der obige Code ist absolut identisch mit dem hässlichen Selektor, den wir im vorherigen Absatz erwähnt haben, aber er ist viel einfacher zu lesen und zu verstehen und nimmt viel weniger Platz ein. Sie können Elemente auch mithilfe von „&“ so gestalten, dass sie auf ihre Pseudoelemente verweisen. In diesem Fall ähnelt diese Funktion „this“ in Javascript.
Operationen
Es geht um das, was Sie erwarten würden: exakte Zahlen oder Variablen verwenden, um mathematische Operationen mit Stil durchzuführen.
@base_margin: 10px;
@double_margin: @base_margin * 2;
@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;
Ich weiß übrigens, dass ich Elemente auch durch 4 dividieren kann und Variablen wie „@quarter_page“ bekomme, aber ich wollte zeigen, dass die Klammerregel auch hier angebracht ist. Klammern sind auch erforderlich, wenn Sie eine Operation innerhalb eines Parameters ausführen möchten. Beispiel: „Rahmen: (@width / 2) durchgezogen #000“.
Sass ist viel vielseitiger, wenn es um Zahlen geht als LESS. Es wurde in Umrechnungstabellen eingebaut, um vergleichbare Einheiten zusammenzufassen. Sass kann mit undefinierten Maßeinheiten arbeiten und diese erkennen. Diese Funktion wurde eingeführt, um den Wert der Bibliothek gegenüber den vom W3C vorgenommenen Änderungen zu ermitteln.
/* Sass */
2 Zoll + 3 cm + 2 Stück = 3,514 Zoll
/* WENIGER */
2 Zoll + 3 cm + 2 Stück = Fehler
Funktionen von Farben
Ich habe bereits erwähnt, wie LESS mir dabei hilft, Farbschemata beim Schreiben von Code zu manipulieren. Damit ist auch die Funktion der Blumen untrennbar verbunden. Nehmen wir an, Sie verwenden in Ihrem gesamten Stildokument eine standardmäßige blaue Farbe und möchten diese Farbe auf die Schaltfläche „Senden“ in Ihrem Formular anwenden. Sie können Photoshop oder einen anderen Editor öffnen, um dort den Hex-Wert abzurufen (für eine Farbe, die etwas heller oder dunkler ist). Oder Sie nutzen einfach die in LESS bereitgestellte Farbfunktion.
Einreichen (
Polsterung: 5px 10px;
Rand: 1 Pixel durchgehend @blau;
Hintergrund: -moz-linear-gradient(top, aufhellen(@blau, 10 %), @blau 100 %); /*Moz*/
Hintergrund: -webkit-gradient(linear, Mitte oben, Mitte unten, from(lighten(@blue, 10%)), color-stop(100%, @blue)); /*Webkit*/
Hintergrund: -o-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*Oper*/
Hintergrund: -ms-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*IE 10+*/
Hintergrund: linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*W3C*/
Farbe: #fff;
Textschatten: 0 -1px 1px rgba(0,0,0,0.4);
}
Die Funktion „Aufhellen“ hellt die Farbe buchstäblich prozentual auf. In diesem Fall hellt die Funktion das Hauptblau um 10 % auf. Diese Methode ermöglicht es Ihnen, die Farbe abgestufter Elemente und aller anderen Elemente mit derselben Farbe zu ändern, indem Sie einfach die Grundfarbe selbst ändern. Dies kann Ihnen im Räumungsprozess erhebliche Vorteile verschaffen. Wenn Sie außerdem eine parametrische Funktion (wie die oben beschriebenen) verwendet haben, können Sie Ihre Browser-Präfixe einfacher gestalten, indem Sie sie in etwas wie „.linear-gradient(lighten(@blue), @blue, 100%) ;“ umwandeln.
Auf der anderen Seite erhalten Sie einen ziemlich schönen Effekt:
So haben wir unseren schönen abgestuften Submit-Button basierend auf einer Variablen erhalten.
Es gibt weitere Farbfunktionen zum Abdunkeln oder Ändern der Farbe von Farben sowie zum Drehen des Farbkreises auf andere Farben. Ich empfehle Ihnen, sie auszuprobieren, um herauszufinden, welche Funktionen für Sie am nützlichsten sind.
Bedingungen und Kontrolle
Eine weitere sehr nützliche Sache, die in LESS angeboten wird. Mit Sass haben Sie die Möglichkeit, if ( ) else ( )-Bedingungen sowie for ( )-Schleifen zu verwenden. Es unterstützt die Operatoren „and“, „or“ und „not“ sowie „“, „=" und „==".
/* Beispiel einer Sass-„if“-Anweisung */
@if Helligkeit($color) > 30 % (
Hintergrundfarbe: #000;
) @anders (
Hintergrundfarbe: #fff;
}
/* Beispiel einer Sass „for“-Schleife */
@für $i von 1px bis 10px (
.border-#(i) (
Rand: $i durchgehend blau;
}
}
Namensräume
Namespaces können verwendet werden, um dem CSS-Code eine weitere Ebene hinzuzufügen, sodass wir Gruppen häufig verwendeter Stile erstellen und diese dann spontan auswählen können. Wenn wir beispielsweise eine Gruppe von Stilen namens „Standards“ erstellt haben, können wir aus dieser Gruppe auswählen, was wir benötigen, wenn wir ein bestimmtes Element verarbeiten möchten.
#defaults (
.nav_list() (
Listenstil: keiner;
Rand: 0; Polsterung: 0;
}
.Taste() (…)
.Zitat () ( … )
}
Wenn wir als nächstes in unserem Code auf ein „ul“-Element innerhalb eines „nav“-Elements stoßen, wissen wir, dass wir den Standardstil benötigen. Wir können es also leicht anwenden.
Navul (
#defaults > .nav_list;
}
Umfang (berücksichtigter Rahmen)
Die Berücksichtigung von Grenzen beim Programmieren ist die Norm, also ist es auch bei LESS die gleiche Norm. Wenn Sie eine Variable auf der Stammebene eines Cascading Stylesheets definieren, steht sie dem gesamten Dokument zur Verfügung. Wenn Sie jedoch eine Variable überschreiben und sie an einen Selektor vom Typ „id“ oder „class“ anhängen, ist sie nur mit diesem Wert innerhalb dieses Selektors verfügbar.
@color: #00c; /* Blau */
#Header (
@color: #c00; /* Rot */
Rand: 1 Pixel einfarbig @color; /* wird einen roten Rand haben */
}
#Fusszeile (
Rand: 1 Pixel einfarbig @color; /* wird einen blauen Rand haben */
}
Da wir die Variable im „#header“-Selektor neu deklariert haben, wird der Wert vor dieser Variablen anders sein und nur innerhalb dieses Selektors anwendbar sein. Alles davor oder danach behält die Bedeutung der ursprünglichen Erklärung bei.
Scope in Sass wird etwas anders gemacht. Wenn im obigen Code die Variable „@color“ in „red“ geändert wird, wird sie so interpretiert, wie sie im Code steht.
Kommentare
Dieser Teil ist ganz einfach. In LESS gibt es zwei gültige Kommentartypen. Der Standard-CSS-Kommentar „/* comment */“ ist gültig und wird verarbeitet und dann angezeigt. Einzeilige Kommentare „//comment“ funktionieren ebenfalls, werden jedoch nicht wiedergegeben oder ausgegeben. Daher können sie als „still“ bezeichnet werden.
Importieren
Auch Importe sind durchaus Standard. Standard „@import: „classes.less“;“ Funktioniert ganz gut. Wenn Sie jedoch eine andere LESS-Datei importieren, ist die Dateierweiterung optional. Daher „@import „classes“;“ wird auch gut funktionieren. Wenn Sie etwas ohne den Verarbeitungsschritt in LESS importieren möchten, können Sie die Erweiterung .css verwenden (z. B. „@import: „reset.css“;“).
String-Interpolation
String-Daten können auch in Variablen verwendet und innerhalb eines Stils mit „@(name)“ aufgerufen werden.
@base_url = "http://coding.smashingmagazine.com";
Hintergrundbild: url("@(base_url)/images/background.png");
Flucht
Es kann vorkommen, dass Sie einen Wert einfügen müssen, der in der CSS-Syntax ungültig ist oder den LESS nicht erkennt. Diese Situation tritt häufig auf, wenn die Implementierung eines Hacks erforderlich ist, um den Betrieb einer Anwendung in Microsoft-Produkten zu normalisieren. Um Fehler und WENIGER Abstürze zu vermeiden, müssen Sie diese ausschließen.
Klasse(
filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
}
/* Wird tatsächlich so ausgegeben: */
.Klasse(
Filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
}
Javascript-Bewertung
Das ist einer meiner Lieblingsaspekte bei der Arbeit mit LESS: Es ist so einfach, Javascript in Stilen zu verwenden. Sie können Ausdrücke verwenden und auch mit dem Backtick (`) auf Funktionen der Entwicklungsumgebung verweisen.
@string: `"howdy".toUpperCase()`; /* @string wird zu „HOWDY“ */
/* Sie können auch die zuvor erwähnte Interpolation verwenden: */
@string: „Howdy“;
@var: ~`"@(string)".topUpperCase()`; /* wird zu „HOWDY“ */
/* Hier greifen wir auf einen Teil des Dokuments zu */
@height = `document.body.clientHeight`;
Ausgabeformatierung
Obwohl LESS keine Ausgabeoptionen hat, bietet Sass vier Ausgabeversionen: verzweigt, kompakt, komprimiert und erweitert.
Endeffekt
Diese beiden großartigen Bibliotheken haben viele Gemeinsamkeiten. Beide sind hervorragende Werkzeuge für Designer, die Code entwickeln, und sie können Entwicklern auch dabei helfen, effizienter und schneller zu arbeiten. Wenn Sie ein Fan von Ruby oder HAML sind, dann ist Sass definitiv das Richtige für Sie. Für mich (und ich bin ein PHP- und Javascript-Entwickler) bleibe ich bei LESS, weil es viel einfacher ist, Javascript-Ausdrücke und Dokumentattribute zu integrieren und auch darauf zuzugreifen. Ich bezweifle, dass ich beim Entwerfen von Stylesheets jemals wirklich ernsthafte Programmierkenntnisse eingesetzt habe, aber ich denke, es ist einen Versuch wert. Wenn Sie beide Bibliotheken genutzt haben, würde ich mich über Ihre Gedanken und Ratschläge freuen! Unsere Ressource freut sich immer über Kommentare!
- Übersetzung
„Welche Präprozessorsprache sollte ich für CSS verwenden?“ ist in letzter Zeit ein sehr drängendes Thema. Das wurde mir schon ein paar Mal persönlich gefragt, und es kommt mir so vor, als würde die Frage alle paar Tage online auftauchen. Es ist sehr schön, dass sich das Gespräch vom Thema der Vor- und Nachteile der Vorverarbeitung zu einer Diskussion darüber verlagerte, welche Sprache die beste ist. Machen Sie sich an die Arbeit!
Um es kurz zu machen: SASS.
Eine etwas lange Antwort: SASS ist in jeder Hinsicht besser, aber wenn Sie bereits mit LESS zufrieden sind, ist das cool, zumindest haben Sie Ihr Leben durch die Verwendung der Vorverarbeitung bereits einfacher gemacht.
Trainingsplan mit Ruby und der Kommandozeile Der einzige Punkt ist die Syntax. Um die von Ihnen erstellten Dateien zu kompilieren, sollten Sie eine Anwendung wie CodeKit verwenden. Sie müssen die Grundlagen von Ruby kennen bzw Befehlszeile oder etwas anderes. Das sollten Sie wahrscheinlich wissen, müssen es aber nicht, also spielt es keine Rolle.Gewinner: keiner.
CSS3 zur Rettung Mit jeder der Sprachen können Sie Ihre eigenen Mixins erstellen, um das Leben mit Präfixen einfacher zu machen. Es gibt hier also keinen Gewinner. Aber wissen Sie, wie Sie die Aktualisierung dieser Präfixe in Ihren Projekten vermeiden können? (Nein, das wissen Sie nicht). Außerdem müssen Sie höchstwahrscheinlich Ihre eigene Mixins-Datei nicht aktualisieren. Mit SASS können Sie Compass verwenden, dessen automatische Updates dafür sorgen, dass Präfixprobleme der Vergangenheit angehören. Natürlich können Sie aktualisieren Software und kompilieren Sie es von Zeit zu Zeit, aber das ist eine triviale Aufgabe und Sie sollten sich nicht darauf einlassen.Es läuft also alles darauf hinaus: SASS hat Compass und LESS nicht. Tatsächlich ist alles etwas komplizierter. Alle Versuche, ein Projekt wie Compass for LESS zu erstellen, sind gescheitert. Der Punkt ist, dass LESS nicht stark genug ist, um dies richtig zu machen. Etwas mehr Details weiter unten.
Gewinner: SASS
Sprachfunktionen: Mit Logic/Loops LESS können Sie „sichere Mixins“ erstellen. Diese Mixins werden nur wirksam, wenn die Bedingung wahr ist. Angenommen, Sie möchten die Hintergrundfarbe ändern, die von der aktuellen Textfarbe abhängt. Wenn die Textfarbe „hell genug“ ist, möchten Sie wahrscheinlich den Hintergrund dunkel machen. Wenn es „dunkel genug“ ist, benötigen Sie einen hellen Hintergrund. Auf diese Weise erhält man am Ende ein Mixin, das in zwei Teile geteilt ist, mit diesen „Wächtern“, die sicherstellen, dass nur einer von ihnen ausgeführt wird.WENIGER
.set-bg-color (@text-color) wenn (Helligkeit(@text-color) >= 50 %) (Hintergrund: schwarz; ) .set-bg-color (@text-color) wenn (Helligkeit(@text.text -Farbe)< 50%) {
background: #ccc;
}
Nach der Verwendung erhalten Sie einen passenden Hintergrund:
WENIGER
.box-1 ( Farbe: #BADA55; .set-bg-color(#BADA55); )
Es ist sehr einfach, aber das Wesentliche ist hoffentlich klar. Man kann noch viel coolere Dinge machen. LESS ermöglicht auch selbstreferenzierende Rekursionen, deren Mixins sich selbst mit aktualisierten Werten aufrufen können.
WENIGER
.loop (@index) when (@index > 0) ( .myclass ( z-index: @index; ) // Ruft sich selbst auf .loopingClass(@index - 1); ) // Schleife stoppen .loopingClass (0) () // Gibt Sachen aus .loopingClass (10);
Hier enden die Logik/Schleifen in LESS. SASS verfügt über aktuelle logische und zyklische Operatoren. if/then/else, for-Schleife, while-Schleife und jede Schleife. Keine Tricks, echte Programmierung. SASS ist eine ziemlich robuste Sprache, die macht mögliche Verwendung Kompass.
Compass verfügt beispielsweise über ein Hintergrund-Mixin, das so leistungsstark ist, dass Sie alles hineinwerfen können, was Sie möchten, und am Ende genau das erhalten, was Sie möchten. Bilder, Farbverläufe und beliebige Kombinationen davon, durch Komma getrennt – und Sie erhalten das gewünschte Ergebnis (einschließlich Präfixen und allem anderen).
Ein lakonischer Code:
SCSS
.bam ( @include background(image-url("foo.png"), linear-gradient(top left, #333, #0c0), radial-gradient(#c00, #fff 100px)); )
Dieser Code verwandelt sich in das folgende Monster (was leider für die browserübergreifende Kompatibilität erforderlich ist):
CSS
.bam (Hintergrund: url("/foo.png"), -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #333333), color-stop(100%, #00cc00)), -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #cc0000), color-stop(100%, #ffffff)); Hintergrund : url("/foo.png"), -webkit-linear-gradient(top left, #333333, #00cc00), -webkit-radial-gradient(#cc0000, #ffffff 100px); Hintergrund: url("/foo .png"), -moz-linear-gradient(top left, #333333, #00cc00), -moz-radial-gradient(#cc0000, #ffffff 100px); Hintergrund: url("/foo.png"), - o-linear-gradient(top left, #333333, #00cc00), -o-radial-gradient(#cc0000, #ffffff 100px); Hintergrund: url("/foo.png"), -ms-linear-gradient( oben links, #333333, #00cc00), -ms-radial-gradient(#cc0000, #ffffff 100px); Hintergrund: url("/foo.png"), linear-gradient(oben links, #333333, #00cc00) , radial-gradient(#cc0000, #ffffff 100px); )
Gewinner: SASS
Gewinner: WENIGER
@extend-Konzept Nehmen wir an, Sie haben eine Klasse mit einem bestimmten Stilsatz erstellt. Dann müssen Sie ein weiteres erstellen, das dem vorherigen ähnelt, jedoch einige Ergänzungen aufweist. Mit LESS können Sie es so machen:WENIGER
.module-b ( .module-a(); /* Kopiert alles von .module-a hier unten */ border: 1px solid red; )
Im Wesentlichen handelt es sich hierbei um ein gewöhnliches „include“. Sie können diese Einfügung auch in SASS verwenden, besser ist es jedoch, @extend zu verwenden. @extend kopiert nicht nur die Stile von .module-a nach .module-b (was zu einer Aufblähung der Datei führt), sondern ändert auch den Namen des .module-a-Selektors in .module-a, .module-b in der kompilierten Datei CSS (was effizienter ist).
SCSS
.module-a ( /* Eine Menge Zeug */ ) .module-b ( /* Ein einzigartiges Styling */ @extend .module-a; )
Kompiliert zu:
CSS
.module-a, .module-b ( /* Eine Menge Zeug */ ) .module-b ( /* Ein einzigartiger Stil */ )
Siehst du das? SASS überschreibt Selektoren, was eine effizientere Methode ist.
Gewinner: SASS
Variablenverarbeitung: LESS verwendet @, SASS verwendet $. Das Dollarzeichen wird in CSS nicht verwendet, @ jedoch nicht. Es wird verwendet, um @keyframes oder @media-Blöcke zu deklarieren. Man denkt vielleicht, dass die Verwendung des einen oder anderen Sonderzeichens Geschmackssache ist, aber ich denke, dass SASS hier gerade deshalb einen Vorteil hat, weil es die Grundkonzepte nicht durcheinander bringt.SASS hat eine seltsame Eigenschaft: Wenn Sie eine „globale“ Variable mit einer „lokalen“ überschreiben, nimmt die globale Variable ihren Wert an. Ein bisschen komisch.
SCSS
$Farbe:schwarz; .scoped ( $color: weiß; Farbe: $color; ) .unscoped ( // LESS = schwarz (global) // SASS = weiß (überschrieben durch lokale) Farbe: $color; )
Dieser Trick kann nützlich sein, ist aber überhaupt nicht intuitiv, insbesondere wenn Sie in Javascript schreiben.
Gewinner: Du musst eine Münze werfen :)
Arbeiten mit Medienregeln Fast jeder von uns, der anfängt, mit @media-Regeln zu arbeiten, fügt unten Blöcke mit diesen hinzu Startseite Stile. Das funktioniert, führt aber zu einer Stilentkopplung wie folgt:CSS
.some-class ( /* Standardstil */ ) /* Hunderte Zeilen CSS */ @media (max-width: 800px) ( .some-class ( /* Responsive Styles */ ) )
Mit SASS oder LESS können Sie diese Stile durch Verschachtelung kombinieren.
SCSS
.some-class ( /* Standardstil */ @media (max-width: 800px) ( /* Responsive Styles */ ) )
„respond-to“ ist eine ziemlich coole SASS-Technik (sehen Sie sich den Code von Chris Eppstein, Ben Schwarz und Jeff Croft an).
SCSS
=respond-to($name) @if $name == kleiner @media-Bildschirm und (min. Breite: 320 Pixel) @content @if $name == großer @media-Bildschirm und (min. Breite: 800px) @content
Dann können Sie sie ganz prägnant verwenden:
SCSS
.Spaltenbreite: 25 % +Response-to-Breite (kleiner Bildschirm): 100 %
Hinweis: Um diese Technik nutzen zu können, benötigen Sie SASS 3.2, das sich derzeit in der Alpha-Phase befindet. Sie können es mit gem install sass --pre installieren. Ich denke, es sollte keinen Zweifel daran geben, dass dies eine wirklich nützliche Sache in der Entwicklung ist.
Gewinner: SASS
Mathematik Grundsätzlich ist der mathematische Teil beider Sprachen recht ähnlich, dennoch gibt es einige Kuriositäten im Umgang mit Maßeinheiten.Beispielsweise nimmt LESS den Wert der ersten Variablen als Einheit und ignoriert alle anderen.
WENIGER
div (width: 100px + 2em; // == 102px (seltsam))
SASS wird Sie klar und deutlich darüber informieren, dass hier ein Fehler verborgen ist:
Inkompatible Einheiten: „em“ und „px“ . Natürlich ist es umstritten, was besser ist – ein Fehler oder ein falscher Wert, aber ich persönlich bin für ersteres. Insbesondere wenn Sie Variablen anstelle von Zahlen bevorzugen, ist es sehr schwierig, sie zu verfolgen.
Mit SASS können Sie mathematische Operationen an „unbekannten“ Maßeinheiten durchführen, die möglicherweise vor dem nächsten Update erscheinen. LESS erlaubt dies nicht. Es gibt noch seltsamere Unterschiede, etwa wie SASS Zahlen mit Einheiten multipliziert, aber das ist heute kein Thema.
Gewinner: SASS (mit einer gewissen Länge)
Vom Autor: Was ist ein Präprozessor? Kurz gesagt ist ein Präprozessor ein Programm, das Daten an die Eingabeanforderungen eines anderen Programms anpasst. CSS-Präprozessoren sind eine Skriptsprache, die die Fähigkeiten von regulärem CSS um Variablen, Verschachtelungsregeln, Funktionen und logische Blöcke erweitert.
Warum sollte ich es verwenden?Oftmals befinden Sie sich in der Situation, dass Sie an verschiedenen Orten den gleichen Wert für eine bestimmte Immobilie ansetzen müssen. Beispielsweise haben Sie zunächst Rot als Primärfarbe der Site angegeben. Dann müssen Sie es auf Grün ändern.
Mit Variablen müssen Sie nicht jede Erwähnung von Rot in Stilen suchen und ersetzen. Sie definieren den Wert einer Variablen einmal, zum Beispiel „Primärfarbe“, und verwenden diese Variable dann als Wert.
Der Primärfarbwert ändert sich an einer Stelle. Sie können CSS-Dateien auch aus anderen Quellen importieren, ohne sich Gedanken über die Anzahl der Netzwerkanfragen machen zu müssen, da diese vor der Kompilierung alle in einer Datei zusammengefasst werden können.
Dank der verschachtelten Natur CSS-Präprozessoren erhalten Sie kompakten Code mit demselben Ergebnis. LESS und SCSS basieren auf dem DRY-Prinzip, das für „Don’t Repeat Yourself“ oder „Wiederhole dich nicht“ steht.
Präprozessoren. Schneller Start
Was ist falsch an WENIGER?Das Netzwerk ist bereits voller Diskussionen darüber, was besser ist: LESS oder SCSS. Daher werde ich nicht näher auf beide Themen eingehen. Stattdessen werde ich über die kleinen Probleme sprechen, die ich mit LESS hatte.
SCSS verwendet das $-Symbol zum Definieren von Variablen, während LESS das @-Symbol verwendet. Da CSS das @-Symbol auch für Medienabfragen, Importe und Keyframe-Animationen verwendet, kann dies für Entwickler verwirrend sein.
Das $-Symbol wird in CSS nicht verwendet. Das @-Symbol ist in SCSS vorhanden, wird jedoch für die Anweisungen @if, @else, @each, @for und @while verwendet.
Obwohl dieses Szenario nicht für jeden realistisch ist, ist es besser, unterschiedliche IDs zum Trennen von Elementen zu verwenden.
SCSS unterstützt traditionelle boolesche Ausdrücke wie if/else, Blöcke und Schleifen. Geschützte Mixins in LESS sind zwar optisch ansprechender, aber schwerer zu verstehen.
Kann mit WENIGER erreicht werden...
...oder einfach SCSS verwenden.
LESS definiert nur ein geschütztes Mixin. Daher können Sie nicht einfach das zweite Argument übergeben und es im selben Mixin verarbeiten, wodurch der Code für alle dupliziert wird mögliche Szenarien. Tatsächlich ist WENIGER (weniger) mehr (Wortspiel beabsichtigt).
Ich weiß, dass es in diesem Fall möglich ist, den Code zu kürzen, indem erweiterte Werte als Eigenschaftsnamen verwendet werden, aber das Problem besteht darin, dass ich nicht bedingt zwei verschiedene Teile desselben Mixins LESS zuordnen kann.
Es gibt noch mehr Kopfschmerzen mit diesem Code ...
Präprozessoren. Schneller Start
Lernen Sie in weniger als zwei Wochen die Grundlagen der Verwendung von Less- und Sass-Präprozessoren von Grund auf
...als damit.
Um mit LESS das gleiche Ergebnis zu erzielen, musste ich alles vordefinieren, ein Mixin schreiben, die Indexposition ermitteln, es mit meiner Logik durchlaufen, bis der Indexwert Null ist, und das Mixin manuell aufrufen.
Obwohl dies meine persönliche Meinung ist, denke ich, dass SCSS Berechnungswerte und mathematische Werte im Allgemeinen besser verarbeitet.
Was ist daran falsch?LESS hingegen ist viel komplexer. Wenn ich es beispielsweise verwende, versuche ich nicht, Berechnungen durchzuführen. Aber selbst wenn ja, seit wann sind 100 % minus 50 Pixel gleich 50 %?
WENIGER, warum ignorierst du Werte mit Änderungseinheiten?
Warum zwingst du mich, deine Krücken zu lernen, wenn ich CSS bereits kenne?
Und noch eine letzte Sache. Dank des LibSass-Projekts verfügt SCSS über viele Wrapper für andere Sprachen wie C, Go, PHP, Python, Dart usw.
Warum haben wir uns entschieden, LESS zugunsten von SCSS aufzugeben?Während wir JotForm Cards entwickelten, mussten wir Variablenwerte vorverarbeiten – Vorkompilierung und serverseitiges Caching gleichzeitig; und das alles musste perfekt gemacht werden.
Wir wollten, dass Benutzer Anpassungen vornehmen können Aussehen Formen Damit alle Änderungen sofort und gleichzeitig angezeigt und auf dem Server zwischengespeichert werden. Im Interesse unserer Benutzer wollten wir keine clientseitige LESS-Shell ausführen, da dies die Rechenleistung des Clients erfordern würde – und viele Dinge schief gehen könnten.
Wir haben den Entwicklungszyklus nicht mit dem Ziel begonnen, von LESS zu SCSS zu wechseln. Aber mitten in der Bewältigung dieser kleineren Probleme war das Fehlen einer anständigen Verpackung für LESS der letzte Tropfen, der das Fass zum Überlaufen brachte.
Allerdings sind die Unterschiede zwischen LESS und SCSS weniger wichtig als ihre Gemeinsamkeiten. Letztendlich spielt es keine Rolle, welchen Präprozessor Sie verwenden, solange Sie ihn verwenden.
Der Versuch, ein großes Projekt mit einer einzigen CSS-Datei und einer herkömmlichen CSS-Struktur zu verwalten, ist viel schwieriger als die Verwendung eines Präprozessors mit einigen Problemen.
Mir gefällt die SASS-Syntax aufgrund ihrer Kürze besser als die SCSS-Syntax. Aber die massive Verschachtelung von Stilen in SASS kann die Vorteile seiner Kürze schnell zunichte machen. Auf jeden Fall ist der Unterschied zwischen SASS und SCSS nicht grundlegend. Es stellte sich heraus, dass LESS näher an SCSS als an SASS lag. Und im Allgemeinen ist es dasselbe. Es gibt nicht viele Unterschiede, aber einige davon verändern die Machtverhältnisse grundlegend.
1. WENIGER – kann clientseitig mit JS erfolgen.Genauer gesagt ist es nicht so, dass er es kann, er ist dafür geschaffen. Gängige Vorgehensweise bei der Verwendung von LESS-Code:
Zu diesem Zeitpunkt wurde die Möglichkeit hinzugefügt, auf dem Server zu kompilieren (sowohl js als auch Ruby).
Auf den ersten Blick scheint es eine seltsame Immobilie zu sein. Warum auf der Client-Seite kompilieren, wenn man auf dem Server perfekt kompilieren und fertiges komprimiertes CSS bereitstellen kann, wie wir es von SASS gewohnt sind?
Der Grund wird klar, wenn man die unscheinbaren allerletzten Zeilen der LESS-Dokumentation studiert:
@height: `document.body.clientHeight`;
Eine so kleine, einsame Linie bietet Möglichkeiten, von denen Layoutdesigner seit Beginn der Beherrschung von Stilen nur geträumt haben. Aufrufen eines clientseitigen Java-Skripts aus CSS und Berücksichtigung tatsächlicher Browsereinstellungen beim Erstellen von Stilen.
Das heißt, wir haben jetzt die Möglichkeit, zuerst das DOM zu laden und dann direkt auf der Clientseite spezielles CSS dafür zu erstellen. Dann überlegen Sie selbst, welche Chancen sich dadurch eröffnen.
Ob Ihr Projekt dies benötigt, ist eine andere Frage. Es ist klar, dass jeder an die Unsicherheit/Unabhängigkeit des Kunden gewöhnt ist und ein Layout im Stil von „Wir machen es universell, sodass es mehr oder weniger jedem bei allen Auflösungen gezeigt wird“ bietet. Dies ist jedoch kein Grund zu vergessen, dass jetzt eine solche Möglichkeit besteht und Sie damit beispielsweise ein sehr flexibles Layout erstellen können.
2. LESS hat im Gegensatz zu SASS/SCSS keine Logik.In LESS gibt es kein Wenn/Dann, Für usw. Wenn man jedoch bedenkt, dass JS leicht darin integriert werden kann, denke ich, dass es durchaus möglich ist, die Logik einzubauen. Ich habe es nicht ausprobiert.
3. Das Mischen ist in LESS einfacher + Sie können Klassen mischen.Besonders gut hat mir gefallen, dass man in LESS Eigenschaften anderer Klassen in die Definition einbeziehen kann. Die Klasse selbst ist ein Mixin. Dies ist eine weitere Funktion, die SASS/SCSS nicht bietet. Sie können eine reguläre CSS-Datei in LESS einbinden und deren Klassen zum Definieren Ihrer Eigenschaften verwenden. Zum Beispiel:
Wickeln (
Textumbruch: umbrechen;
Leerraum: vor dem Umbruch;
Leerraum: -moz-pre-wrap;
Zeilenumbruch: Wortumbruch;
}
pre ( .wrap )
Mit Ausnahme des 1. Punktes ist der Unterschied nicht groß und die Auswahl für den Amateur größer.
Für mich persönlich sieht LESS aufgrund seiner Einfachheit attraktiver aus. Ich habe noch nie zuvor Zyklen und Bedingungen in Stilen benötigt. Klassische Dienstprogramme wie „Box-Shadow, Linear-Gradient, Darken“ sind in LESS verfügbar.
Ja, viele vorgefertigte Bibliotheken wurden bereits für SASS geschrieben (