Ich bin mir sicher, dass du von Sass gehört hast und wie "Du wirklich anfangen musst es zu benutzen!"
Ein neues Werkzeug zu lernen kann schaden und es ist fast unmöglich, die Zeit dafür zu finden, aber manchmal kommt ein Werkzeug, das unsere Branche verändert und es ist zu gut, es zu ignorieren.
Da unsere Webseiten und Apps immer komplexer werden, werden unsere Stylesheets größer und schwerer zu pflegen. CSS-Präprozessoren wie Sass helfen dabei, unsere Stylesheets übersichtlich zu halten und unseren Code zu modularisieren, während sie eine ganze Reihe von Funktionen bieten, die in regulärem CSS noch nicht verfügbar sind.
Diese zusätzlichen Funktionen machen sie auch wirklich Spaß zu benutzen! Nun haben Sie vielleicht etwas gesehen, das so aussieht:
$i: 6;@while $i > 0 {.item-#{$i} {Breite: 2em * $ i; } $ i: $ i - 2;} // http://sass-lang.com/documentation/file.ASSASS_REFERENCE.html#_11
und dachte: "Whattttttttttt? Danke, aber ich behalte mein normales CSS. "
Ich gebe zu, es sieht entmutigend aus und einige Leute machen einige wirklich verrückt, komplexe Sachen mit Sass, aber ich bin hier, um dir zu sagen, dass jeder anfangen kann, es zu benutzen und die Gewinne, die du am ersten Tag bekommst, werden dich zu einem Sass-Gläubigen machen.
Die Einrichtung von Sass für ein Projekt ist etwas außerhalb des Rahmens dieses Artikels, aber die Installation ist relativ einfach und die Sass-Website hat Anleitung für Linux, Mac oder PC. Die coole Sache ist, sobald es installiert ist, können Sie jede vorhandene CSS-Datei nehmen und umbenennen .scss macht es zu einer Sass-Datei.
Alles richtig formatierte CSS ist gültig Sass!
Das heißt, Sie können anfangen, Sass zu verwenden, während Sie weiterhin Ihre Stile schreiben, wie Sie es immer haben, und langsam mehr Funktionen hinzufügen, wenn Ihr Komfort steigt. Das stimmt, Leute, genauso. Gleiches, aber hier sind fünf tolle Gewinne, die du jetzt zur Verfügung hast:
Was ist die Hauptfarbe des Headers? Wie schreibe ich diesen Font-Stack? Wie oft hast du schon CSS geschrieben und musstest deine vorherigen Styles nach einem Wert durchsuchen oder musst den Farbtropfer ausbrechen, um die hexadezimale Farbe wieder zu finden?
Sass bietet Variablen zum Speichern von Informationen, die Sie in Ihrem Stylesheet wiederverwenden möchten. Jetzt können Sie diesen Farbwert oder den langen Fontstack als etwas leicht zu merkendes speichern. Die Art, wie Sie eine Variable deklarieren, ist ein Dollarzeichen $ gefolgt von dem Namen. Dieser Name kann sein, was immer Sie wollen. Dann geben Sie einen Doppelpunkt ein : gefolgt von dem Wert und einem Semikolon ; :
$mainFont: "Helvetica Neue", Arial, sans-serif;$mainColor: #CC6699;
Wenn Sie nun einen dieser Werte verwenden möchten, können Sie stattdessen einfach die Variable verwenden.
.mySelector { font-family: $mainFont; color: $mainColor; }
Super, oder? Dieses eine Feature allein macht es die Installation wert, da es beim Erstellen von CSS so viel Zeit spart. Es ist so großartig, dass es wahrscheinlich in das CSS eindringen wird Spez Aber wer weiß wann wir es nutzen können? Zum Glück für uns, mit Sass, müssen wir nicht warten.
Jetzt könnten Sie sich selbst sagen: "CSS hat @import, es ist nicht so cool" und Sie hätten Recht, aber die CSS- und Sass-Versionen unterscheiden sich in bedeutender Weise. In normalen CSS @import zieht andere Stylesheets an, tut dies aber, indem es eine weitere HTTP-Anfrage macht, etwas, das wir normalerweise vermeiden wollen. Aus diesem Grund haben Sie @import möglicherweise noch nicht einmal benutzt. Sass, auf der anderen Seite, ist ein Präprozessor (Schwerpunkt auf dem Pre), der diese Datei einlesen wird, bevor er das CSS kompiliert.
Das Ergebnis ist eine CSS-Seite, die von einer HTTP-Anfrage bearbeitet wird. Das bedeutet, dass Sie Ihre CSS in kleinere, wartungsfreundlichere Blöcke aufteilen können, während immer noch nur eine Seite an den Browser geliefert wird. Müssen Sie den Text auf der Schaltfläche korrigieren? Keine Skimming Stylesheets mehr auf der Suche nach den passenden Button Styles. Öffne einfach deinen Knopf teilweise und mache die Änderungen.
Was ist ein Teil? Wie sie klingen. Sie sind teilweise Sass-Dateien, die kleine CSS-Schnipsel enthalten, die Sie in andere Sass-Dateien einfügen können. Sie werden mit einem führenden Unterstrich gefolgt von einem Namen benannt. _myFile.scss . Der Unterstrich lässt Sass wissen, dass die Datei nur eine Teildatei ist und nicht in CSS kompiliert werden sollte. Um diesen Teil zu importieren, müssen Sie nur den @import zu Ihrer Datei hinzufügen:
@import 'partials/myPartial';
Also importiere ich _myPartial.scss , das sich in einem Ordner namens Partials befindet. Sie müssen den Unterstrich oder die Dateierweiterung nicht einfügen. Sass ist klug genug zu wissen, welche Datei du meinst. Die Verwendung von Teiltönen ermöglicht uns eine großartige Modularisierung unseres Codes, wodurch er portabler und einfacher zu warten ist.
Sass bringt Funktionen zur CSS-Party. Ich weiß, nicht jeder ist ein Programmierer und das Konzept einer Funktion kann ein bisschen über den Kopf sein, aber keine Sorge, viele fügen eine Menge nützlicher Funktionen hinzu, während sie nicht übermäßig kompliziert sind. Was die Farben betrifft, gibt es einige nützliche, um sie zu manipulieren, aber drei stehen als großartige, einfache Gewinne für Leute heraus, die gerade erst anfangen. Schauen wir uns an, wie wir sie verwenden.
//syntax lighten($color, $amount) darken($color, $amount) rgba($color, $alpha)
Die Syntax ist ziemlich geradlinig. In den drei obigen Funktionen sehen Sie, dass wir jeweils zwei Argumente haben. Die erste ist die Farbe, die wir manipulieren wollen. Dies kann ein Hexadezimal-, RGB- oder ein beliebiges Farbformat sein, das richtiges CSS ist. Es kann sogar eine Variable sein. Die zweite ist die Menge, um die wir diese Farbe ändern möchten. 10% dunkler machen, 5% heller machen, Alpha auf 0,6 einstellen. Das Ergebnis dieser Funktion ist der Wert, der im kompilierten CSS festgelegt ist. Unten sehen Sie unsere Funktionen bei der Arbeit
//in parenthesis you can put any color value followed by the amount you want to modify it by.//lighten(#000, 10%)//darken(rgb(0,0,0), 25%)//rgba(blue, 0.6)//rgba($mainColor, 0.6)//use case$color: #333;//set color variable.myButton {background-color: rgba($color, 0.8);color: lighten($color, 65%);border: 1px solid darken($color, 5%);}//this compiles to:.myButton {background: rgba(51, 51, 51, 0.8);color: #d9d9d9;border: 1px solid #262626;}Hoffentlich können Sie schon sehen, wie das nützlich sein könnte. Es gibt ein Dutzend Möglichkeiten, diese drei Funktionen zu verwenden, um einen ziemlich coolen Farbkontrast hinzuzufügen, und sie können überall dort verwendet werden, wo ein Farbwert normalerweise gehen würde. Diese drei sind nur die Spitze des Eisbergs. Es gibt viel mehr Farbfunktionen und viele kreative Möglichkeiten, wie sie genutzt werden können.
Einige Dinge in CSS sind ein bisschen mühsam zu schreiben. Mixins bilden Gruppen von CSS-Deklarationen, die wir auf unserer Website wiederverwenden können. CSS3-Stile, die Herstellerpräfixe erfordern, sind ein perfektes Beispiel für die Verwendung eines Mixins. Anstatt die gleiche Eigenschaft immer und immer wieder zu tippen, schreiben wir ein Mixin und rufen das Mixin immer dann an, wenn wir es benutzen wollen. Um ein Mixin zu deklarieren, verwenden wir das @mixin Stichwort. Wir geben ihm dann einen Namen und wenden unsere Stile zwischen geschweiften Klammern an: @mixin box-sizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Argumente können sogar an das Mixin weitergegeben werden, um es flexibler zu machen. Um unser Mixin zu benutzen, benutzen wir einfach das @include Stichwort.
//declare mixin(now being passed an argument)@mixin box-sizing($boxSize) {-webkit-box-sizing: $boxSize;-moz-box-sizing: $boxSize;box-sizing: $boxSize;}//use mixin.mySelector {@include box-sizing(border-box);}//compiled to:.mySelector {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
Wie Sie im obigen Beispiel sehen, nennen wir unser Mixin mit dem @include gefolgt von dem Namen der Mixin dann alle Argumente in Klammern. Denken Sie daran, wie viel Zeit Sie damit sparen können. Warum benutzt das nicht jeder?
Diese Tools waren großartig, aber ich habe das Beste zum Schluss gespeichert. @extend ist eine der nützlichsten Funktionen, die es uns ermöglicht, eine Reihe von CSS-Eigenschaften von einem Selektor zum anderen zu teilen. Stellen Sie sich ein paar Schaltflächen vor, wie zum Beispiel eine Schaltfläche zum Akzeptieren und Ablehnen in einem modalen Fenster. Da sie beide Tasten sind, werden sie wahrscheinlich die meisten des gleichen Stylings teilen, aber die Schaltfläche "Ablehnen" wird einen roten Hintergrund haben, um sie hervorzuheben. Mit Sass schreiben wir die Standardstile für alle Knöpfe und "erweitern" dann diese Stile zum Abneigungsknopf, wo wir den roten Hintergrund hinzufügen würden.
.button {background: rgba($color, .8);color: lighten($color, 65%);border: 1px solid darken($color, 5%);padding: 1em;display: block;max-width: 200px;}.button-decline {@extend .button;background: red;}//compiles to.button, .button-decline {background: rgba(51, 51, 51, 0.8);color: #d9d9d9;border: 1px solid #262626;padding: 1em;display: block;max-width: 200px;}.button-decline {background: red;}Mann, wie großartig ist es, sich nicht wiederholen zu müssen? Dies fördert nicht nur die Modularisierung unserer Stile, sondern reduziert auch das Risiko, dass Stile von Button zu Button ablaufen. Dies ist ein großer Zeitgewinn! Multiplizieren Sie dies für alle Stile der Website und wir haben einen erheblich verkürzten Zeitrahmen für das Schreiben von CSS.
Verdammt, mit all der Zeit, die wir sparen, könnten wir vielleicht die komplexeren Aspekte von Sass lernen.
Ich hoffe, ich habe Sie davon überzeugt, dass Sie diesem erstaunlichen Tool eine Chance geben können und einige Funktionen vorgestellt haben, die Ihre Produktivität sofort verbessern könnten. Die Wahrheit ist, dass ich diesen Artikel morgen noch einmal schreiben könnte und fünf weitere wirklich nette Features zum Teilen habe. Es ist einfach unglaublich! Sass (und andere Präprozessoren) sind hier um zu bleiben, also tun Sie sich einen Gefallen und fangen Sie an, es zu benutzen. Interessierte finden weitere Informationen auf Twitter und im Web:
Twits:
Webs:
Und wenn Sie in der Region Tri-County in Süd-Florida sind, besuchen Sie uns im Süd-Florida Sass Meetup .