Sass Mixins: Halten Sie Ihre Stylesheets TROCKEN

Einer meiner Lieblingsvorteile bei der Verwendung von Sass ist, dass es die Automatisierung des Front-End-Design-Workflows zum Kinderspiel macht. Es gibt viele JavaScript-Tools zum Arbeiten mit Dateien und zum Automatisieren anderer Aufgaben, aber die integrierten Mixin-Funktionen von Sass ermöglichen das Schreiben von Code im modularen Front-End-Stil. In diesem Artikel habe ich zehn meiner Lieblings-Sass-Mixins zum Automatisieren des Schreibens von Webstilen aufgelistet.

Dies sind die Sass-Mixins, die ich für fast jedes Webprojekt verwende, an dem ich arbeite. Es gibt viele interessante Artikel mit einigen nützlichen Sass-Mixins im Internet. Es gibt auch ein paar gute Sass-Mixin-Bibliotheken, die sich hervorragend für kleinere Aufgaben eignen, wie Bourbon. Eine weitere großartige Mixin-Bibliothek, aus der ich einige der folgenden Mixins abgeleitet habe, ist Andy.

Die Mixins, auf die ich in diesem Artikel eingehen werde, behandeln Folgendes:

• Medien-Anfragen
• Farbthemen
• Zentrierelemente
• Klarfix
• Einheitliche Schriftgrößen
• Animationsübergänge
• Bilder der Netzhaut
• Schnelle Steigungen
• Externe Schriftarten
• Schnelles Auffüllen/Ränder

Medien-Anfragen

Mit Medienabfragen können Sie Ihren Stylesheets ganz einfach benutzerdefinierte Unterbrechungspunkte hinzufügen und schnell benutzerdefiniertes Reaktionsverhalten innerhalb eines Elements für verschiedene Unterbrechungspunkte hinzufügen. Littering-Stylesheet-Medienabfragen können jedoch schnell zu Kopfschmerzen führen, insbesondere wenn es darum geht, sie später zu pflegen. Mit Sass-Mixins kann sich das ändern.

 $breakpoint-small: 600px; $breakpoint-med-small: 960px; $breakpoint-med: 1175px; @mixin screen($size, $type: max, $pixels: $breakpoint-small) { @if $size == 'small' { @media screen and ($type + -width: $breakpoint-small) { @content; } } @else if $size == 'med-small' { @media screen and ($type + -width: $breakpoint-med-small) { @content; } } @else if $size == 'med' { @media screen and ($type + -width: $breakpoint-med) { @content; } } @else if $size == 'large' { @media screen and ($type + -width: $breakpoint-med) { @content; } } @else if $size == 'custom' { @media screen and ($type + -width: $pixels + px) { @content; } } @else { @content; } }

Wenn diese definiert sind, können die Mixins wie folgt verwendet werden:

 .foo { @include screen(large) { width: 20%; } @include screen(med) { width: 40%; } @include screen(med-small) { width: 60%; } @include screen(small) { width: 80%; } @include screen(custom, max, 400) { width: 100%; } }

Es funktioniert hervorragend eigenständig oder mit anderen Grid-Frameworks wie Bootstrap.

Die if-Anweisung gibt eine Medienabfrage aus, die auf eine bestimmte Bildschirmgröße abgestimmt ist, abhängig von dem Größennamen, der dem Mixin bereitgestellt wird. Auf diese Weise können Sie das Verhalten Ihrer CSS-Attribute einfach entsprechend anpassen. Sie können auch den Punkt anpassen, an dem Sie Ihre CSS-Attribute anpassen möchten. Normalerweise bleiben die reaktionsschnellsten Layouts bei 3 oder 4 definierten Bildschirmbreitenmaßen, um den Inhalt anzupassen. Die Varianz von Bildschirmgrößen, Geräten und Anwendungen nimmt ständig zu, aber es gibt einen beliebten Trend, den viele Webentwickler für ihre Layouts verwenden werden; kleine Bildschirmgrößen für Telefone, mittlere für Tablets, große für Laptops und extra große für Desktop-Computer.

Als Referenz sind die in Bootstrap v3 verwendeten Medienpunkte:

• max-width: 767px (jeder Bildschirm bis zu einer Breite von 767px)
• Mindestbreite: 768 Pixel (jeder Bildschirm mit einer Breite von mehr als 768 Pixel)
• Mindestbreite: 992 Pixel (jeder Bildschirm mit einer Breite von mehr als 992 Pixel)
• Mindestbreite: 1200 Pixel (jeder Bildschirm mit einer Breite von mehr als 1200 Pixel)

Farbthemen

Durch das Definieren eines Farbthemas, das auf Ihrer gesamten Website verwendet werden soll, können Sie Zeit sparen, wenn Sie die gleichen farbigen CSS-Teile auf den gleichen HTML-Elementen verwenden. Wenn Sie möchten, dass alle Ihre Div-Schaltflächen einen durchgezogenen gepunkteten Rand von 1 Pixel haben, können Sie dies ganz einfach zu Ihrem Design hinzufügen. Mit diesem Sass-Mixin können Sie so viele Farbvariablen festlegen, wie Sie möchten, und so viele Klassen beeinflussen, wie Sie möchten. Dies kann ein nützliches Werkzeug sein, um Farboptionen für etwas bereitzustellen, oder immer dann, wenn Sie eine Funktion haben, die die Farbe vieler Elemente gleichzeitig beeinflusst. Hier finden Sie einen großartigen Artikel mit weiteren Informationen zum Arbeiten mit Farbthemen in Sass.

 @mixin theme($name, $color) { // Define colors in your theme $primary: $color; $secondary: lighten(adjust-hue($color, 20), 10%); // Add your classes with css colors added .#{$name} { .element { color: $primary; } .other-element { background: $secondary; } } }

Sobald Sie ein detailliertes Farbthema eingerichtet haben, werden Sie 70 % Ihres farbbezogenen Stylings eliminieren, wenn Sie es richtig machen. Ich würde auch empfehlen, diese .scss-Datei von Ihren anderen .scss-Dateien zu trennen und alle Ihre Markenfarbvariablen in dieselbe Datei aufzunehmen.

Eine Zeile so einfach wie:

 @include theme(theme-banana, yellow);

wird emittieren:

 .theme-banana .element { color: yellow; } .theme-banana .other-element { background: #bbff33; }

Zentrierelemente

Abhängig von Ihrem Layout gibt es viele verschiedene Möglichkeiten, ein Element in Ihren Stilen zentriert auszurichten. Die folgende Methode verwendet eine absolute Positionierung und ermöglicht es Ihnen, vertikale, horizontale oder beide zentrierte Elemente zu definieren. Das übergeordnete Element muss position: relative haben. Auf diese Weise können Sie die zentrierte Position eines Elements in zwei kurzen Codezeilen einfach definieren.

 @mixin center($position) { position: absolute; @if $position == 'vertical' { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @else if $position == 'horizontal' { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translate(-50%); } @else if $position == 'both' { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } }

 .foo { @include center(both); } .foo-parent { position: relative; }

Dieses Mixin ist eine der vielseitigsten Möglichkeiten, Inhalte zu zentrieren, aber es ist erwähnenswert, dass es viele verschiedene Möglichkeiten gibt, Ihre Inhalte zu zentrieren, und dies möglicherweise nicht immer die beste Lösung ist. Abhängig von Ihrem Layoutstil und der Berücksichtigung der Browserkompatibilität möchten Sie Ihre Inhalte möglicherweise anders zentrieren. Flexbox ist ein weiteres beliebtes und sehr nützliches Werkzeug für die Ausrichtung, obwohl es derzeit von alten Browsern nicht vollständig unterstützt wird. Eine einfache Text- und Containerausrichtung kann ohne dieses Mixin mithilfe einfacher CSS-Eigenschaften durchgeführt werden. Dieser hilft Ihnen beim Erstellen von Layouts und beim Arbeiten mit Containern in anderen Containern.

Klarfix

Wenden Sie die CSS-Eigenschaft clearfix schnell und effektiv auf Elemente an. Es gibt viele Clearfix-Lösungen im Internet, und diese scheint am besten zu funktionieren. Es ist auch einfach zu verwenden, sobald das Sass-Mixin erstellt wurde.

Dieses Mixin wird immer dann von Vorteil sein, wenn Sie Inhalte rechts oder links schwebend haben und den Platz unter dem schwebenden Element löschen möchten, um darunter neue Inhalte einzufügen.

 %clearfix { *zoom: 1; &:before, &:after { content: " "; display: table; } &:after { clear: both; } }

 .container-with-floated-children { @extend %clearfix; }

Einheitliche Schriftgrößen

Legen Sie in Ihrem Dokument eine rem-Schriftgröße fest, die für alle Ihre Textelemente verwendet werden soll. Dies ist eine bessere Methode zum Vergrößern und Verkleinern von Schriftarten anstelle von em. Die Verwendung von em wird basierend auf den anderen CSS-Attributen zusammengesetzt, aber rem wird nur basierend auf der Größe, die Sie in Ihrem HTML-Dokument definieren, nach oben oder unten skaliert. Das Trennen einer .scss-Datei für Ihre gesamte Typografie und die Verwendung des folgenden Mixins zum Definieren Ihrer Standardschriftgrößen wird Ihren Typografie-Codierungsworkflow drastisch automatisieren.

 @function calculateRem($size) { $remSize: $size / 16px; @return $remSize * 1rem; } @mixin font-size($size) { font-size: $size; font-size: calculateRem($size); }

 p { @include font-size(14px) }

Dieses Mixin erstellt auch einen Pixel-Fallback für Browser, die rem nicht unterstützen (IE8 und darunter). Wenn der Browser die Rem-Größenanpassung nicht unterstützt, berechnet das Mixin das Pixeläquivalent der von Ihnen festgelegten anfänglichen Rem-Größe und gibt sowohl Pixel- als auch Rem-Werte für ein Element aus.

Animation

Definieren Sie schnell Animationseigenschaften und fügen Sie sie Ihren Elementen hinzu. Derzeit benötigt die Animations-CSS-Eigenschaft noch Herstellerpräfixe, also wird dies auch dem Mix hinzugefügt.

 @mixin keyframes($animation-name) { @-webkit-keyframes #{$animation-name} { @content; } @-moz-keyframes #{$animation-name} { @content; } @-ms-keyframes #{$animation-name} { @content; } @-o-keyframes #{$animation-name} { @content; } @keyframes #{$animation-name} { @content; } } @mixin animation($str) { -webkit-animation: #{$str}; -moz-animation: #{$str}; -ms-animation: #{$str}; -o-animation: #{$str}; animation: #{$str}; }

Der erste Teil des Mixins fügt die richtigen Herstellerpräfixe hinzu, die für die Browserkompatibilität benötigt werden. Im nächsten Abschnitt wird es eingerichtet, um Ihre benutzerdefinierten Zeichenfolgen und Eigenschaften einzugeben. Im letzten Abschnitt des Mixins erstellen Sie Ihren Mixin-Namen (in diesem Fall: Ausblenden) und definieren, was bei jedem Keyframe in der Animation geschehen soll. Dieses Beispiel-Setup ist sehr einfach, und Sie können Änderungen an einem beliebigen Prozentsatz der Animationsdauer hinzufügen.

 // Define animation name, and properties @include keyframes(fade-out) { 0% { opacity: 1; } 90% { opacity: 0; } } // Add animation to element .element { width: 100px; height: 100px; background: black; @include animation('fade-out 5s 3'); }

Das Beispiel hier nimmt das Zielelement bei 0 % der Animation (Anfang) und ändert die Eigenschaft von voller Deckkraft (Deckkraft: 1;) auf keine Deckkraft und verschwindet im Wesentlichen (Deckkraft: 0;) bei 90 % der Animation . Wenn ich also die Animation auf eine Zeitleiste von 5 Sekunden einstelle, verschwindet das Element nach 4,5 Sekunden (90 % der 5-Sekunden-Animation). Die letzte Eigenschaft, die ich bei der Verwendung des Mixins definiere (die „3“), ist die Anzahl der Wiederholungen der Animation.

Netzhautbilder

Fügen Sie hochauflösende Bilder zu Ihrer Website hinzu, mit einem Fallback für Geräte, die keine hochauflösenden Bilder anzeigen. Bei der Verwendung von Retina-Bildern würde ich empfehlen, so viel wie möglich zu komprimieren, ohne das Bild zu zerstören. Ein gutes Tool dafür ist TinyPNG (unterstützt PNG und JPG).

 @mixin image-2x($image, $width, $height) { @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { background-image: url($image); background-size: $width $height; } }

Mit diesem Mixin können Sie eine Regel an der gleichen Stelle wie die CSS-Eigenschaft hinzufügen, die das Originalbild definiert.

 div.logo { background: url("logo.png") no-repeat; @include image-2x("logo2x.png", 100px, 25px); }

Bisher war die einzige CSS-Lösung dafür die Verwendung von Medienabfragen, und diese Lösung ist viel sauberer und einfacher. Weitere Gedanken und Ideen zu diesem Mixin finden Sie in diesem Artikel.

Schnelle Farbverläufe

Fügen Sie ganz einfach Farbverläufe hinzu, die nur Startfarbe, Endfarbe und Farbverlaufstyp definieren. Fügen Sie alle Verlaufseigenschaften hinzu und Sie können nach Bedarf auswählen. Beim Farbverlaufstyp können Sie zwischen einem vertikalen Farbverlauf, einem horizontalen Farbverlauf oder einem radialen (kugelförmigen) Farbverlauf wählen.

 @mixin background-gradient($start-color, $end-color, $orientation) { background: $start-color; @if $orientation == 'vertical' { background: -webkit-linear-gradient(top, $start-color, $end-color); background: linear-gradient(to bottom, $start-color, $end-color); } @else if $orientation == 'horizontal' { background: -webkit-linear-gradient(left, $start-color, $end-color); background: linear-gradient(to right, $start-color, $end-color); } @else { background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color); background: radial-gradient(ellipse at center, $start-color, $end-color); } }

Sie müssen sich nicht mehr die verschiedenen Herstellerpräfixe und Parameterreihenfolgen für die Implementierung von Farbverläufen merken.

 .foo { @include background-gradient(red, black, 'vertical'); }

Externe Schriftarten

Mit der CSS-Eigenschaft font-face können wir ganz einfach Schriftarten in einem Verzeichnis hinzufügen und alle Schriftarten einbeziehen. Bei der Verwendung von Schriftartdateien haben verschiedene Browser unterschiedliche Kompatibilität mit Dateitypen. Dieses Mixin hilft, das zu lösen, indem es eine relevante Schriftartdatei in einem Verzeichnis verwendet.

Schließen Sie einfach alle Schriftartdateien in ein Verzeichnis ein und fügen Sie das Tag „@include“ in Ihren Stilen hinzu, wodurch alle Dateien aus dem von Ihnen ausgewählten Ordner abgerufen werden.

 @mixin font-face($font-name, $file-name, $weight: normal, $style: normal) { @font-face { font-family: quote($font-name); src: url($file-name + '.eot'); src: url($file-name + '.eot?#iefix') format('embedded-opentype'), url($file-name + '.woff') format('woff'), url($file-name + '.ttf') format('truetype'), url($file-name + '.svg##{$font-name}') format('svg'); font-weight: $weight; font-style: $style; } }

Dieses Mixin kümmert sich um die Definition alternativer Schriftartformat-URLs, einschließlich seltsamer Problemumgehungen, die für die Abwärtskompatibilität erforderlich sind.

Schnelles Auffüllen und Ränder

Der Hauptgrund, warum ich dies verwende, ist, dass ich eine bestimmte Padding-Eigenschaft weglasse, wie manchmal padding-left, und ich sie nicht definieren möchte. Wenn Sie die Sass-Eigenschaft null verwenden, können Sie Auffülleigenschaften weglassen. Die gleichen Regeln gelten für Margins.

 //Padding mixin @mixin padding($top, $right, $bottom, $left) { padding-top: $top; padding-right: $right; padding-bottom: $bottom; padding-left: $left; } //Margin mixin @mixin margin($top, $right, $bottom, $left) { margin-top: $top; margin-right: $right; margin-bottom: $bottom; margin-left: $left; }

Das Mischen kann dann verwendet werden, um eine Reihe von padding-*- und margin-*-Eigenschaften in Ihren Stylesheets zu ersetzen. Sie können dieses Mixin schnell in jedes Element einfügen und nur die Seiten der Auffüllung/Ränder definieren, die Sie einschließen möchten. Auffüllung und Ränder sind einer der am häufigsten verwendeten CSS-Stile, die Elementen hinzugefügt werden, und eine kleine Zeitersparnis wie diese wird sich schnell summieren.

 // Usage definition @include padding(top, right, bottom, left); @include margin(top, right, bottom, left); // Usage 1 @include padding(1px, 2px, 3px, 4px,); @include margin(1px, 2px, 3px, 4px); // Output 1 // padding: 1px 2px 3px 4px; // margin: 1px 2px 3px 4px; // Usage 2 (with null properties) @include padding(1px, null, 3px, 4px); @include margin(1px, 2px, null, 4px); // Output 2 // padding-top: 1px; // padding-bottom: 3px; // padding-left: 4px; // margin-top: 1px; // margin-right: 2px; // margin-left: 4px;

Einpacken

Die Verwendung von Sass-Mixins wie den in diesem Artikel beschriebenen ist eine großartige Möglichkeit, Ihren Workflow effizienter zu gestalten. Diese spezifischen Mixins helfen Ihnen dabei, weniger Zeit mit allgemeinen Webaufgaben zu verbringen, und geben Ihnen mehr Zeit, sich auf andere Aspekte des Projekts zu konzentrieren, die eine sorgfältigere und qualifiziertere Einsicht erfordern.

Das Installieren und Arbeiten mit Sass kann auf verschiedene Arten erfolgen und erfordert die Verwendung der Eingabeaufforderung, um einige Bibliotheken in Ihrem Projekt zu installieren. Eine Möglichkeit, Sass zu installieren, ist die Verwendung von Ruby – wie auf der Sass-Hauptwebsite hier beschrieben – und eine andere beliebte Methode ist die Verwendung von Node.js.

Die Vorteile von Sass gehen über die Automatisierung hinaus und können Ihnen helfen, Ihre Projekt-Stylesheets einfach zu erstellen und zu verwalten. Selbst einige der einfachsten Webprojekte können Tausende von Zeilen CSS-Code enthalten. Sass ist eine großartige Möglichkeit, diesen Code in überschaubarere Bits aufzuteilen, von denen jedes seinen eigenen Fokus hat.