Eins für die Straße Weitere leckere Bourbon-Mixins

Dieser Artikel ist der zweite Teil meiner Untersuchung von Mixins aus der Bourbon Sass-Bibliothek. Darunter finden Sie nützliche Beispiele, die Ihren Arbeitsablauf beschleunigen und Ihren Sass-Code minimieren.

Eine weitere Liste von Goodies

Wir werden einen Eindruck von den folgenden acht Mixins bekommen:

Inline Block Mixin
Position mixin
Dreieck mixin
Clearfix Mixin
Button mischen
Größe mixin
HiDPI-Medienabfrage-Mixin
Retina Image Mixin

Wie im vorherigen Tutorial stellen die folgenden Beispiele nicht unbedingt die besten Entwurfspraktiken dar, sondern werden zur Erkundung der grundlegenden Funktionen dieser Mixins ausgewählt.

Inline Block Mixin

Absätze werden standardmäßig als angezeigt Block Elemente.

HTML:

"html

Blabla

Elemente auf Blockebene, z. B. Absätze, erstellen automatisch eine neue Zeile im Layout.

Dieses Mixin ist praktisch, wenn Sie das ändern möchten Standardanzeigeverhalten von Elementen zu Inline-Block. Es legt nicht nur fest Anzeige: Inline-Block kümmert sich aber auch um Macken und ältere Unterstützung für IE7.

Weitere Informationen zur Anzeige auf designshack.net.

Sass: Diese Blöcke verhalten sich durch Inline-Block.

"css .paragraphs-behaviour-like-blocks + Inline-Block-Hintergrundfarbe: Tomate

// SCSS-Syntax // .paragraphs-behaviour-like-blocks @include Inline-Block; // "

Schauen Sie sich die generierte CSS-Ausgabe an. Wer will sowieso mit so hässlichem Zeug umgehen?

CSS-Ausgabe:

css .paragraphs-behaviour-like-blocks display: inline-block; vertikal ausrichten: Grundlinie; Zoom: 1; * Anzeige: Inline; * vertikal ausrichten: auto; Hintergrundfarbe: Tomate;

Einstellen Anzeige: Inline-Block, Die Absätze werden inline angezeigt, behalten jedoch ihre Blockeigenschaften bei.

Beachtung! Beachten Sie den Leerraum zwischen den Blockelementen. Wenn du benutzt hast schweben Um dasselbe Layout zu erreichen, würden Sie keine Leerzeichen sehen. Es handelt sich dabei um eine Art Standard-Leerzeichen, das im HTML-Format vorhanden ist. Die Ränder werden dabei nicht auf 0px gesetzt. Stattdessen müssen Sie alle Zeichenlücken in der Markierung selbst entfernen, wie in diesem Stift dargestellt:

Position Mixin

Dieses Mixin ist eine Abkürzung für das Schreiben von etwas wie dem Folgenden:

Sass:

css .some-element position: relative oben: 0px links: 100px

Sass:

"css .some-element + position (relativ, 0px 0 0 100px) // oben rechts unten links

// SCSS-Syntax .some-element // @ include-Position (relativ, 0px 0 0 100px); "

Das ist es. Keine Magie, aber trotzdem super nützlich. Das Halten einfacher und lesbarer Stylesheets zahlt sich im Laufe der Zeit aus.

Dreieck Mixin

Möchten Sie CSS-Dreiecke verwenden, ohne herumzuspielen? Es ist sicherlich nicht nötig, Bilder für den Job zu verwenden. Mit diesem Mixin ist es ein Kinderspiel.

Sass:

"css .triangle + triangle (25px, tomate, down) // größe, farbe, richtung

// SCSS-Syntax .triangle @include triangle (25px, tomate, down); // "

Der dritte Parameter definiert die Richtung. Optionen für dieses Mixin sind:

Nieder
oben
links
Recht
aufrecht
oben links
runter rechts
links unten

Sie können sogar eine zweite Farbe definieren, wenn Sie eine Hintergrundfarbe für Ihr Dreieck benötigen.

Clearfix Mixin

Container, die Elemente mit Floating-Elementen enthalten, haben das Problem, dass der Container mit der Höhe null ist. Das Containerelement entleert sich auf null Pixel, wenn alle darin enthaltenen Elemente Floating-Elemente sind und aus dem Container entnommen werden fließen. Im Wesentlichen gibt es nichts mehr, um den Behälter zu füllen.

Das Clearfix mixin sorgt dafür, wenn es auf das container / wrapper-Element angewendet wird. Das Beste daran ist, dass für das Clearfix kein zusätzliches "leeres" Markup erforderlich ist. Es hält die Dinge semantisch und trennt die Bedenken, indem Sie einfach den clearfix in Ihre Stylesheets einfügen. Schauen Sie sich dieses sehr einfache Beispiel an:

HTML:

"html

"Sass:" css $ hellgrau: # D4D4D4 .grey-wrapper Hintergrundfarbe: $ hellgrau + clearfix .logos float: rechts + Hintergrundbild (URL ("[email protected]"), URL ("thoughtbot.png")) Hintergrundposition: Mitte oben, oben links Hintergrundwiederholung: repeat-y, repeat-x Höhe: 220px Breite: 50% // SCSS-Syntax // .grey-wrapper @include clearfix; Hintergrundfarbe: $ hellgrau; .logos float: right; @include Hintergrundbild (URL ("[email protected]"), URL ("thoughtbot.png")); Hintergrundposition: Mitte oben, oben links; Hintergrundwiederholung: Wiederholung-y, Wiederholung-x; Höhe: 220px; Breite: 50%; // "! [file] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633234957.jpg) In dem obigen Beispiel wird der graue Container erweitert, um die Floated-Logos darin, jedoch wenn Clearfix nicht verwendet wird:! [Datei] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633341703.jpg) Wenn Sie mitnehmen ein Blick auf den Quellcode zeigt, wie dieser * micro clearfix * funktioniert: Sass: [Bourbon-Quellcode] (https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_clearfix) .scss) "css @mixin clearfix &: after content:" "; Anzeige: Tisch; Lösche beide; "Dieses Mixin verwendet die :nach dem Pseudoelement, um eine leere Zeichenfolge ganz am Ende des Containers zu platzieren. Dabei wird der Inhalt nach dem Logo nachgeahmt und der Browser wird dazu gebracht, den grauen Container zu erweitern, um andere Elemente darin zu umgeben. ## Button Mixin Benötigen Sie hochwertige Buttons aus der Box? ### Standard Button! [Datei] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633769651.png) HTML: "html Super duper button" Sass: "css $ light-blue: # 2485F1 .super-duper-button + button ($ light-blue) // SCSS-Syntax // .super-duper-button @include-button ($ light-blue); // "Das war's ! Einfache und semantisch saubere Tasten. Sie verfügen sogar über großartig aussehende Hover-Effekte. Und es gibt zwei weitere Optionen: ### Pill Button! [Datei] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633844440.png) HTML: "html Super duper pill button "css $ dark-pink: # 6B32D1 .super-duper-button + button (pill, $ dark-pink) // SCSS-Syntax // .super-duper-button @include-button (pill, $ dark-) Rosa); // "### Glänzender Knopf! [Datei] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633895872.png) HTML:" html Super duper glänzender Knopf "Sass:" Css $ Acceptance-Green: # 43C914. Super-Duper-Button + Button (glänzend, $ Acceptance-Green) // SCSS-Syntax // .Super-Duper-Button @ Include-Button (glänzend, $ Acceptance- Grün); // "** Achtung! ** Bitte beachten Sie, dass der Text auf den Schaltflächen seine Farbe automatisch in Abhängigkeit von der * Helligkeit * der Basisfarbe der Schaltfläche ändert. Auf diese Weise sorgt das Mixin für einen besseren Kontrast und eine bessere Lesbarkeit. Awesome! [Datei] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441634000114.png) Sass: "css $ hellgrau: #DEDEDE .super-duper-button + button (glänzend, $ hellgrau) // SCSS-Syntax // .super-duper-button @include button (glänzend, $ hellgrau); // "## Size Mixin Müssen Sie jemals definieren Breite und Höhe in einer erklärung? Bei Bourbon müssen Sie Folgendes tun: Sass: "css .small-article + size (300, 400) // SCSS-Syntax // .small-article @include size (300, 400); //" CSS Ausgabe: "css .small-article width: 300px; height: 400px;" Sie können Pixelwerte oder nur numerische Werte angeben. Sie können verwenden Auto auch für diese Werte. Wenn Sie nur eine Größe angeben, geht Bourbon davon aus, dass Sie ein Quadrat wünschen. Sass: "css .square + size (25px) // SCSS-Syntax // .square @include size (25px); //" ## HiDPI-Mixin Wenn Sie schnell herstellerunabhängige Medienabfragen zur Erkennung von * generieren möchten HiDPI * ("Retina") - Geräte, dieses Mixin ist sehr praktisch. Beginnen Sie mit der Angabe eines Pixel-Verhältnisses * für das Zielgerät * und Deklarationen, die sich ändern, wenn die Medienabfrage aktiviert wird. Das Standardverhältnis beträgt 1,3. Sass HiDPI-media-query: "css .image width: 150px + hidpi (1.5) width: 200px // SCSS-Syntax // .image width: 150px; + hidpi (1.5) width: 200px; //" CSS-Ausgabe: "css .image width: 150px; @media only screen und (-webkit-min-device-pixel-ratio: 1,5), nur screen und (min-moz-device-pixel-ratio: 1,5). nur Bildschirm und (-o-min-Gerät-Pixel-Verhältnis: 1,5 / 1), nur Bildschirm und (Mindestauflösung: 144 dpi), nur Bildschirm und (Mindestauflösung: 1,5 dpi) width: 200px; Ziemlich cool! Es reduziert den repetitiven Code ziemlich stark. ## Retina Image Mixin Abhängig von der * Pixeldichte * des Geräts, auf dem Ihre Designs angezeigt werden, können Sie Bilder mit der entsprechenden Bitmap-Auflösung bereitstellen. Dieses feine Mixin liefert ein * Retina-Hintergrundbild * oder ein * Nicht-Retina-Hintergrundbild * - abhängig vom Ergebnis der internen HiDPI-Medienabfrage des Mixins, um das Gerät auf seine Pixeldichte zu überprüfen. Wenn ich mich nicht irre, wird als Bonus nur eines der Bilder verwendet, um das Herunterladen beider zu vermeiden - was besonders für Mobilfunknetze von Vorteil ist. Wenn Ihnen das alles auf den Grund geht, würde ich Ihnen empfehlen, mit diesem fantastischen [Artikel] (http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/) über das Smashing Magazine zu beginnen. Sass: "css .logo + Retina-Image (Logo-Icon, 50px, 30px) // SCSS-Syntax // .logo @include Retina-Image (Logo-Icon, 50px, 30px); //" Die CSS-Ausgabe hilft bei der Erklärung der Funktionalität: "css .logo background-image: url (logo-icon.png); @media only screen und (-webkit-min-device-pixel-ratio: 1,3), nur screen und (min- -Moz-Gerät-Pixel-Verhältnis: 1,3), nur Bildschirm und (-o-min-Gerät-Pixel-Verhältnis: 1,3 / 1), nur Bildschirm und (min. Auflösung: 125 dpi), nur Bildschirm und (min. Auflösung) : 1.3dppx) .logo background-image: url (logo-icon_2x.png); background-size: 50px 30px; "Der Standardwert eines Geräte-Pixelverhältnisses von 1,3 richtet sich an Apple" Retina "-Geräte (die eine Verhältnis von 2) sowie Geräte mit Pixelverhältnissen von "niedrig" bis 1,3. Dieses Mixin erwartet ein ** .png ** als Standarderweiterung für alle Bilder. Standardmäßig erwartet es auch eine ** _ 2x.png ** -Erweiterung des Dateinamens Ihres Retina-Bildes. Sie können beide Standardeinstellungen überschreiben, indem Sie einen anderen Dateinamen und eine Standarderweiterung angeben: Sass: "css .logo + retina-image (Logo-Symbol, 50px, 30px, $ extension: jpg, $ retina-dateiname: HiDPI- Logo-Symbol, $ Retina-Suffix: _retina) // SCSS-Syntax // .logo @include Retina-Bild (Logo-Icon, 50px, 30px, $ extension: jpg, $ retina-Dateiname: HiDPI-logo-icon, $ retina-suffix: _retina); // "CSS-Ausgabe:" css .logo background-image: url (logo-icon.jpg); @media only screen und (-webkit-min-device-pixel-ratio) : 1.3), nur Bildschirm und (min-moz-Gerät-Pixel-Verhältnis: 1,3), nur Bildschirm und (-o-min-Gerät-Pixel-Verhältnis: 1,3 / 1), nur Bildschirm und (min-Auflösung: 125dpi), nur Bildschirm und (min. Auflösung: 1.3dppx) .logo Hintergrundbild: URL (HiDPI-logo-icon_retina.jpg); Hintergrundgröße: 50px 30px; "## Cheers! Das ist alles, was wir in Bezug auf Bourbon-Mixins behandeln werden. Im nächsten Tutorial werfen wir einen Blick auf die Funktionen von Bourbon.

Web-Design