Share
Sass hilft dabei, CSS schneller zu schreiben. Mixins sind die Features, die es möglich machen. Es gibt mehrere umfangreiche Bibliotheken mit komplexen Formeln für jede Situation, aber heute werde ich zeigen, wie Sie Ihre eigenen Mixins aufrütteln können, die vorhandene Workflows ergänzen.
Miniaturansicht: Handmischungsei auf PhotoDune.
Hinweis: Die vollständigen Dokumentdateien können vorab heruntergeladen werden, um zu sehen, was wir erstellen, und sich ein Bild davon zu machen, wie rohe Sass-Dateien aussehen.
Ich verwende Sass seit über einem Jahr in meiner Frontend-Entwicklung, und Mixins waren das Feature, auf das ich mich sofort gefasst habe. Ich sah eine sofortige Reduzierung der Zeit, die ich mit dem Schreiben von Stylesheets verbrachte, unabhängig davon, wie groß oder klein das Projekt ist. Aber was sind Mixins? Von der Sass Language Website:
Mixins sind eine der leistungsfähigsten Sass-Funktionen. Sie ermöglichen die Wiederverwendung von Stilen - Eigenschaften oder sogar von Selektoren -, ohne sie kopieren und einfügen oder in eine nicht semantische Klasse verschieben zu müssen.
Mit anderen Worten, Mixins sind Codegeneratoren. Mit dem erstellen Sie ein Mixin in Ihrem Sass-Stylesheet @mixin Direktive, definieren Sie die CSS-Regeln, die ausgegeben werden sollen, und rufen Sie sie immer dann auf, wenn Sie diese Regeln in einer Style-Deklaration benötigen. Ich verwende Mixins ausschließlich für CSS3-Features wie Box-Shadows, Text-Shadows und Border-Radien. Viele dieser Funktionen werden nicht vollständig unterstützt und erfordern ein Herstellerpräfix wie -webkit-, -moz-, -ms-, -o- wie erwartet zu arbeiten. Anstatt jedes Mal fünf Regeln zu schreiben, wenn ich eine CSS3-Funktion verwenden möchte, kann ich ein einzeiliges Mixin aufrufen und es mir ermöglichen, das richtige CSS zu generieren.
Für diese ersten beiden Schritte müssen wir die Terminal-App (Eingabeaufforderung in Windows) öffnen, um die Ruby-Sprache zu überprüfen und den Sass-Edelstein zu installieren. Suchen Sie das Terminal an den folgenden Stellen:
Wenn Sie das Terminal geöffnet haben, geben Sie den folgenden Befehl ein, um nach einer Ruby-Installation zu suchen. Geben Sie nicht das Dollarzeichen ein - es ist Ihr Platzhalter.
$ welcher Rubin
Sie sollten einige Pfadinformationen wie sehen / usr / local / bin oder eine Fehlermeldung, wenn Ruby nicht installiert ist. Hier ist die Ausgabe von meinem OS X Terminal:
Wenn Sie eine Fehlermeldung erhalten oder wissen, dass Ruby nicht auf Ihrem Computer installiert ist, finden Sie hier einige Ressourcen, die Sie mit minimalem Aufwand in Betrieb nehmen können. Die Installation von Ruby geht über den Rahmen dieses Artikels hinaus und ist auf den folgenden Websites ausführlich beschrieben.
Nachdem Sie die Ruby-Sprache überprüft oder installiert haben, ist Sass ein Kinderspiel. Geben Sie im Terminal den folgenden Befehl ein: $ gem install sass. Wenn Ihr Benutzer nicht über die richtigen Berechtigungen verfügt, müssen Sie den Befehl möglicherweise mit sudo ausführen (Super User tun) so was: $ sudo gem install sass. In wenigen Sekunden sollten Sie eine Ausgabe sehen, die der folgenden Abbildung ähnelt.
Während du es nicht tust brauchen Eine Compiler-App wie LiveReload, Compass oder CodeKit zum Kompilieren von Sass in Vanille-CSS macht den ersten Abstecher um den Block viel ruhiger. CodeKit ist nur für OS X, LiveReload hauptsächlich für OS X mit einer Windows-Betaversion. Compass App funktioniert unter OS X, Windows und Linux. Die Lizenzen liegen zum Zeitpunkt des Schreibens zwischen 10 USD und 25 USD, sind es aber für die Zeitersparnis wert, wenn Sie tiefer in die Entwicklung von Sass einsteigen.
Nun wäre ein guter Zeitpunkt zu erwähnen, dass Sass in zwei Varianten erhältlich ist, .sass und .scss. Ohne auf Details einzugehen, halte ich mich an die .scss-Syntax, weil sie Vanilla-CSS sehr ähnelt und ohne Probleme kompiliert.
Nachdem Sie Ihren Compiler eingerichtet haben, möchten Sie ein Arbeitsverzeichnis mit Ihren HTML- und CSS-Dateien einrichten. Für dieses Tutorial habe ich ein Beispiel mit dem Namen Write Your Own Sass Mixins erstellt. Nachfolgend wird die Struktur beschrieben, auf die ich mich im gesamten Tutorial beziehen werde. Wenn Sie die Dokumentdateien noch nicht heruntergeladen haben, fügen Sie die Dateien Museo Sans und Droid Serif dem Verzeichnis / fonts hinzu. Diese Schriftarten sind für einige der Mixins erforderlich, die wir später im Lernprogramm erstellen werden.
Schreiben Sie Ihre eigenen Sass Mixins index.html / css (Verzeichnis) / fonts (Verzeichnis) / scss (Verzeichnis) | - main.scss
Da ich mich für LiveReload entschieden habe, werden wir es anweisen, auf Änderungen zu achten, die in CSS kompiliert werden sollen. Wenn Sie LiveReload starten, sollten Sie mit dem unten gezeigten Bildschirm begrüßt werden. Ziehen Sie Ihr Arbeitsverzeichnis in die Seitenleiste für überwachte Ordner im LiveReload-Fenster.
Als nächstes wollen Sie das überprüfen Kompilieren Sie SASS, LESS, Stylus, CoffeeScript und andere Box. Klicken Optionen um als nächstes den Ausgabepfad auszuwählen.
Sie sollten eine leere Tabelle mit hervorgehobenen Ausgabepfaden sehen und in der ersten Zeile scss / main.scss markieren. Drücke den Ausgabeordner festlegen… Schaltfläche hier. Der CSS-Ordner sollte standardmäßig ausgewählt sein. Klicken Sie auf Ausgabeordner und Übernehmen.
Aktualisieren Sie Ihre index.html-Datei mit diesem Code und aktualisieren Sie Ihren Browser. Ihr Index sollte folgendermaßen aussehen:.
Schreiben Sie Ihre eigenen Sass Mixins Etwas Text geht hier.
LiveReload bietet Browsererweiterungen für Firefox und Chrome. Der schnellste Weg zum Starten ist jedoch, das folgende Javascript-Snippet (aus dem LiveReload-Fenster) in Ihre index.html-Datei zu kopieren, direkt über dem Schluss Karosserie Etikett. Sobald dieses Snippet installiert ist, überwacht LiveReload alle HTML-Dateien auf Änderungen an Ihren HTML- und Sass-Dateien und aktualisiert automatisch den Browser (nicht mehr Command + R).
Jetzt, da wir mit dem Housekeeping fertig sind, können wir mit dem Erstellen von Mixins beginnen und unseren Compiler die harte Arbeit erledigen lassen.
Wie bereits erwähnt, verwende ich in meinen Seitenlayouts viele CSS3-Funktionen. Das Problem mit diesen innovativen Funktionen ist, dass sie viele Herstellerpräfixe erfordern und ich nicht viel Geduld habe. Wenn ich einmal ein Mixin schreiben kann, anstatt fünf stark duplizierte CSS-Zeilen jedes Mal, wenn ich abgerundete Ecken haben möchte, mache ich es.
Mixins werden in Sass-Dateien durch das gekennzeichnet @mixin () Erklärung. Wenn ein Prozessor wie LiveReload auf diese Syntax stößt, sucht er nach Argumenten in Klammern und CSS-ähnlichen Anweisungen in geschweiften Klammern. Der Compiler interpretiert dann diese Anweisungen und gibt in diesem Fall reines CSS an Ihr Stylesheet aus, main.css.
Öffnen Sie Ihre main.scss-Datei und kopieren Sie den folgenden Mixin-Code. Wenn Sie auf Speichern klicken, sollte Ihr Browserfenster mit index.html automatisch neu geladen werden und ein zentriertes graues Div mit 6px abgerundeten Ecken haben.
/ * Main.scss * / @mixin border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) -Webkit-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -moz-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -ms-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -o-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; Rahmenradius: $ topLeft $ topRight $ bottomRight $ bottomLeft; #wrapper @include border-radius (6px, 6px, 6px, 6px); Breite: 750px; Höhe: 250px; Hintergrund: #eee; Marge: 0 auto;
Mit unserem ersten Mixin beginnen wir also gut. Das Grenzradius-Mixin weist jedoch eine Schwachstelle auf: Wenn wir einen Rand mit einer Deckkraft von weniger als 100% anwenden, wird der Hintergrund durchscheint. In vielen Fällen nicht gerade eine großartige Designauswahl.
Glücklicherweise haben wir eine einfache Korrektur in der Eigenschaft background-clip. Wenn Sie nicht vertraut sind, hat Chris Coyier von CSS-Tricks einen großartigen Bericht über die Immobilie.
Sass-Mixins können auch mit anderen Mixins erweitert werden. Dadurch können wir den Hintergrundclip separat schreiben und ein drittes Mixin erstellen, das ihn und unsere Grenzradiusregeln aus dem vorherigen Schritt aufruft. Fügen Sie der main.scss-Datei den folgenden Code hinzu und speichern Sie. Nach dem Aktualisieren Ihres Browsers sollten Sie einen blauen Hintergrund und einen halbtransparenten helleren blauen Radius sehen.
/ * Main.scss * / @mixin border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) -webkit-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -moz-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -ms-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -o-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; Rahmenradius: $ topLeft $ topRight $ bottomRight $ bottomLeft; @mixin background-clip background-clip: padding-box; @mixin kombinierter Radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) @include background-clip; @include border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft); body Hintergrund: hellblau; #wrapper width: 750px; Höhe: 250px; Hintergrund: #eee; Marge: 0 auto; Umrandung: 15px festes rgba (255, 255, 255, 0.3); einen kombinierten Radius (6px, 6px, 6px, 6px) enthalten;
Obwohl wir anfänglich eine Reihe von Zeilen dupliziert haben, haben wir jetzt ein wiederverwendbares Mixin, das jederzeit durch Angabe der Grenzradiuswerte aufgerufen werden kann. Und es wird richtig gerendert.
Textschatten sind eine großartige Möglichkeit, typografische Behandlungen und Schaltflächen zu verstärken. Ich verwende sie häufig für ausgewählte Navigationszustände, Registerkarten oder Beschriftungen. Sie sind auch eines der aufregendsten Elemente, da IE9 sie nicht unterstützt und es keine guten reinen CSS-Workarounds gibt.
Trotz dieser unglücklichen Tatsache füge ich Mixin-Code für die anderen modernen Browser und den IE 10 Beta-Code hinzu. Ich habe auch ein jQuery-Skript für Text-Shadow-Rendering in IE9 oder niedriger gefunden.
In modernen Browsern ist die Eigenschaft "Textschatten" ähnlich wie der Boxschatten mit horizontalen und vertikalen Versatz-, Unschärfungs- und Farbparametern aufgebaut. Fügen Sie den folgenden Dateien den Dateien main.scss und index.html hinzu, und Sie sollten einen verschwommenen 3px-Schatten hinter blauem Text sehen.
/ * Main.scss * / @mixin text-shadow ($ horizOffset, $ vertOffset, $ blur, $ color) -webkit-text-shadow: $ horizOffset $ vertOffset $ blur $ color; -moz-text-shadow: $ horizOffset $ vertOffset $ blur $ color; -ms-text-shadow: $ horizOffset $ vertOffset $ blur $ color; / * IE 10+ * / -o-text-shadow: $ horizOffset $ vertOffset $ blur $ color; text-shadow: $ horizOffset $ vertOffset $ blur $ color; #wrapper, # wrapper-text-shadow width: 750px; Höhe: 250px; Hintergrund: #eee; Marge: 0 Auto 20px; Polsterung: 15px 0 0 15px; Umrandung: 15px festes rgba (255, 255, 255, 0.3); einen kombinierten Radius (6px, 6px, 6px, 6px) enthalten; # wrapper-text-shadow> p Schriftgröße: 36px; Farbe blau; @ include text-shadow (0, 3px, 3px, # 333);
Index.html, füge gleich nach dem schließenden Tag div # wrapper hinzu
Textschattentest.
Für den letzten Schritt habe ich Mixins für Box-Schatten, Hintergrundverläufe, @ font-face-Deklarationen und verbessertes Rendern von Typen erstellt. Diese Mixins wurden in modernen Browsern (Firefox, Chrome, Safari, Opera, IE9) getestet und enthalten alle herstellerspezifischen Präfixe.
Ich werde nicht auf jedes Detail eingehen. ausführliche Kommentare sind in der Datei main.scss enthalten. Mixins folgen einem grundlegenden Format und können bei sich ändernden Anforderungen darauf aufbauen. Wenn Sie ein CSS-Bedürfnis haben, kann ein Mixin geschrieben werden, um es zu bedienen.
Aktualisieren Sie die Dateien index.html und main.scss mit dem folgenden Code. Nach dem Aktualisieren sollten Sie ein Browserfenster mit einer Reihe von Boxen sehen, die jeweils einen anderen Mix-Test zeigen.
Ein weiteres Textmate-Snippet Box-Schattenprüfung.Inset-Box-Schattentest.Textschattentest.Hintergrundgradiententest.@ font-face-Test in Museo 700 ohne.Verbessern Sie die Lesbarkeit von Texten und den Kerning-Test.
Accentsconagua
@mixin border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) -webkit-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -moz-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -ms-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -o-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; Rahmenradius: $ topLeft $ topRight $ bottomRight $ bottomLeft; @mixin background-clip background-clip: padding-box; @mixin kombinierter Radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) @include background-clip; @include border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft); @mixin box-shadow ($ horizOffset, $ vertOffset, $ blur, $ color) / * Blur ist ein optionaler Parameter, hilft jedoch, den Schatten abzuschwächen. Rufen Sie das Mixin auf, indem Sie Pixelwerte für $ horizOffset, $ vertOffset und $ blur sowie einen Hex-Wert für $ color anwenden. Die Border-Collapse-Regel wird eingefügt, um Schatten korrekt im IE9 darzustellen. * / -webkit-box-shadow: $ horizOffset $ vertOffset $ blur $ color; -moz-box-shadow: $ horizOffset $ vertOffset $ blur $ color; -ms-box-shadow: $ horizOffset $ vertOffset $ blur $ color; -o-box-shadow: $ horizOffset $ vertOffset $ blur $ color; Box-Schatten: $ horizOffset $ vertOffset $ blur $ color; Grenzzusammenbruch: separat; @mixin box-shadow-inset ($ horizOffset, $ vertOffset, $ blur, $ color) / * Dieselben Parameter wie @mixin box-shadow, erzeugen jedoch einen inneren Schatten für gedrückte oder vertiefte Effekte. * / -webkit-box-shadow: $ horizOffset $ vertOffset $ Unschärfe $ Color-Einfügung; -moz-box-shadow: $ horizOffset $ vertOffset $ Unschärfe $ Color-Einfügung; -ms-box-shadow: $ horizOffset $ vertOffset $ Unschärfe $ Color-Einfügung; -o-box-shadow: $ horizOffset $ vertOffset $ Unschärfe $ Color-Einfügung; Box-Schatten: $ horizOffset $ vertOffset $ Unschärfe $ Color-Einfügung; @mixin background-gradient ($ direction, $ first-color, $ second-color) hintergrund: $ first-color; Hintergrundbild: -webkit-linearer Gradient ($ direction, $ first-color, $ second-color); Hintergrundbild: -moz-linearer Gradient ($ Richtung, $ erste Farbe, $ zweite Farbe); Hintergrundbild: -ms-linearer Gradient ($ Richtung, $ erste Farbe, $ zweite Farbe); Hintergrundbild: -o-linearer Gradient ($ Richtung, $ erste Farbe, $ zweite Farbe); Hintergrundbild: linearer Farbverlauf ($ Richtung, $ erste Farbe, $ zweite Farbe); @include background-clip; @mixin-Typografie ($ font-name, $ font-longname) / * Erstellen Sie ein / fonts-Verzeichnis auf derselben Ebene wie Ihr / css-Verzeichnis, um sicherzustellen, dass die unten angegebenen URL-Zeichenfolgen ordnungsgemäß funktionieren. Webfonts enthalten den Kurznamen, auf den in den Zeichensatzfamilien-Deklarationen verwiesen wird, und den langen Namen, der für URL-Verweise benötigt wird. Das Mixin muss mit der @ include-Deklaration direkt darunter aufgerufen werden, um die Schriftarten ordnungsgemäß zu laden. * / @ font-face font-family: $ font-name; src: url ("… / fonts /" + $ font-longname + ".eot"); src: lokales ('☺'), url ("… / fonts /" + $ font-longname + ".woff") Format ('woff'), url ("… / fonts /" + $ font-longname + ") .ttf ") format ('truetype'), url ("… / fonts / "+ $ font-longname +" .svg # webfontjVVPrHqE ") format ('svg'); Schriftgewicht: normal; font-style: normal; @include Typografie ("Museo700", "Museo700-Regular-webfont"); @include-Typografie ("DroidSerifRegular", "DroidSerif-Regular-webfont"); @mixin-Verbesserung der Lesbarkeit / * Die Verbesserung der Lesbarkeit wird für Header und kleinere Textmengen aufgrund des ressourcenintensiveren Zeichens von Schriftarten empfohlen. Es wird nicht für mobile Geräte empfohlen. Weitere Informationen finden Sie im MDN-Artikel (https://developer.mozilla.org/en-US/docs/CSS/text-rendering) oder in Gigaom (http://gigaom.com/2010/08/12/ Optimierelegierbarkeit für klareren Text in Ihrem Browser /). Überprüfen Sie in Chrome oder Safari und schalten Sie die Textwiedergabe um :optimierenLegibilitätsregel, um die Auswirkungen auf das Kerning zu sehen. Außerdem werden Ligaturen für Schriftarten aktiviert, die erweiterte Gruppen unterstützen. * / Text-Rendering: OptimizeLegibility; @inhalt Textschatten (0, 0, 1px, transparent); body Hintergrund: hellblau; Schriftfamilie: Helvetica, Arial, Serifenlose; Schriftgewicht: normal; #wrapper, # wrapper-inset-shadow, # wrapper-text-shadow, # wrapper-background-gradient, # wrapper-font-family, # wrapper-better-lesbarkeit width: 750px; Höhe: 250px; Hintergrund: #eee; Marge: 0 Auto 20px; Polsterung: 15px 0 0 15px; Umrandung: 15px festes rgba (255, 255, 255, 0.3); einen kombinierten Radius (6px, 6px, 6px, 6px) enthalten; #wrapper @include Box-Schatten (0, 3px, 3px, # 333); # wrapper-inset-shadow @include box-shadow-inset (0, 3px, 3px, # 333); # wrapper-text-shadow @ include-text-shadow (0, 3px, 3px, # 333); Schriftgröße: 36px; Farbe blau; # wrapper-background-gradient @include background-gradient (oben, # 999, #fff); # wrapper-font-family font-family: "Museo700", Helvetica, Arial; # wrapper-better-lesbarkeit> h1 font-family: "DroidSerifRegular", Georgia, "Times New Roman", serif; Schriftgewicht: normal; Schriftgröße: 48px; @einschließlich Verbesserung der Lesbarkeit; 
Sass-Mixins sind eine großartige Möglichkeit, um mit CSS3 schnell loszulegen. Egal, ob Sie im Code arbeiten oder eine komplette Site von Grund auf neu erstellen - Mixins verbessern Ihren Workflow, indem Sie die Anzahl der Zeilen reduzieren und den Zeitaufwand für das Überprüfen der Syntax reduzieren.
Da diese Funktionen CSS3-zentriert sind, sollten Sie über einen Sicherungsplan für ältere Browser verfügen. Bei manchen Standorten sind abgerundete Ecken und Schatten nicht kritisch, und es ist durchaus akzeptabel, ein verschlechtertes visuelles Layout zu zeigen. Für andere kann ein Polyfill wie Modernizr Feature-spezifische Klassen zum Schreiben von CSS-Regeln für den Fallback bereitstellen.
Ich hoffe, Ihnen hat dieses Tutorial gefallen, danke fürs Lesen!
