9 Mixin-Bibliotheken für Sass-Designer sollten erhalten

Wenn Sie Sass in Ihrem Entwicklungsworkflow verwenden, kennen Sie die Wichtigkeit von Mixins. Wenn Sie einige Dinge sehen, die geschrieben werden wiederholt und langweilig in CSS, Hier können Sie mit Mixins Wiederholungen vermeiden. Ein Mixin enthält CSS-Deklarationen, die Sie auf Ihrer Website wiederverwenden können.

Es gibt viele Mixins, die von Entwicklern erstellt werden, um Sie bei der Arbeit mit Sass in Ihrer Entwicklung zu unterstützen. Die meisten behandeln Dinge, die sich häufig in CSS wiederholen. Von Anpassung an mehrere Browser zu Schaltflächen, Animationen und Übergangseffekte erstellen, Dies und mehr finden Sie in den folgenden 11 Mixin-Bibliotheken, die Sie für Ihre Sass-Entwicklung erhalten sollten.

1. Bourbon

Bourbon ist eine Sass-Bibliothek, die Mixing, Funktionen und Add-Ons enthält, mit denen Sie die Erstellung von Stylesheets für die Browser-übergreifende Verwendung vereinfachen können. Für mich ist dies der wunderbarste Sass-Mix. Es enthält fast alles, was Sie zum Gestalten Ihrer Website benötigen, während Ihr Stylesheet leicht bleibt.

Schauen Sie sich die vollständige Dokumentation an, um alle verfügbaren Mixins und Funktionen zu verwenden.

2. Sass CSS3 Mixins

Sass CSS3 Mixins bieten Mixins, die für verschiedene Browser geeignet sind. Hier finden Sie eine Reihe von Best-Practice-Mixins wie Hintergrund, Rahmen, Box, Spalte, Schriftart, Transformation, Übergang und Animation. Es ist genug für Ihre Styling-Bedürfnisse. Zur Verwendung importieren Sie die css3-mixins.scss und rufen Sie das Mixin in Ihrer CSS-Klasse auf.

Laden Sie dieses Mixin hier herunter.

3. CssOwl

CssOwl bietet nützliche Mixins, um die Position eines Elements (relativ oder absolut) festzulegen und Inhalt mit dem Pseudo-Selektor hinzuzufügen ( :nach dem und :Vor). Es ist auch hilfreich, wenn Sie Sprite-Elemente erstellen möchten: Mit dem Mixin können Sie die Bildposition in Ihrem Sprite flexibel festlegen. Neben Sass ist auch die CssOwl-Mixin-Bibliothek für LESS und Stylus verfügbar.

4. Haltepunkt Sass

Breakpoint hilft Ihnen, auf einfache Weise Medienanfragen über Sass zu erstellen. Mit Haltepunkt können Sie Variablen erstellen und ihm einen Wert zuweisen, der den Wert definiert min-Breite oder maximale Breite von Medienanfragen. Da die von Ihnen erstellte Variable einen aussagekräftigen Namen hat, können Sie sie leicht zur Verwendung in Sass aufrufen.

5. Scut

Scut enthält eine Reihe wiederverwendbarer Sass-Mixins, Platzhalter, Funktionen und Variablen, mit deren Hilfe Sie gängige Style-Code-Muster problemlos implementieren können. Es enthält Best-Practice-Code zum Erstellen von Webmaterial wie Seitenlayouts und zum Stilisieren von Typografie. Sie können die Wiederholung beim Schreiben von Code reduzieren, indem Sie den Code öfter wiederverwenden. So können Sie besser organisiert werden.

6. Safran

Mit Saffron können Sie CSS3-Animationen und Übergänge problemlos hinzufügen. Es stehen ein Dutzend Animationen und Übergänge zur Verfügung, darunter Einblenden / Ausblenden, Ein- / Ausblenden, Ein- und Aussteigen sowie verschiedene Effekte wie Shake, Wackeln, Abspringen und andere. Um Saffron zu verwenden, fügen Sie einfach das Mixin in die Sass-Deklaration ein und rufen Sie den Effektnamen in Ihrer CSS-Klasse auf. Sie können Saffron erhalten, indem Sie es mit Bower oder Gem installieren oder es einfach von Github herunterladen.

7. Geben Sie Einstellungen ein

TypeSettings ist ein Toolkit für Sass. Es wird die Schriftgröße in der modularen Skala unter Verwendung von em (anstelle von rems oder Pixeln), vertikalen Rhythmus und responsive Ratio-basierten Schlagzeilen festgelegt. Sie können dieses auch mit Bower installieren, die Version herunterladen oder das Repo klonen. Weitere Informationen finden Sie auf der Seite.

8. Sass Line

Sass Line ist ein Sass-Mixin, mit dem Sie die Typografie verbessern können. Es verwendet Rems-Einheit für Ihre Schriftart, damit Sie diese proportional vom Grundlinienraster aus bearbeiten können. Sass Line verwendet einen präzisen vertikalen Rhythmus, der auf dem Basislinienraster basiert. Sie können für jeden Ihrer Haltepunkte einen modularen Maßstab festlegen, um gute Proportionen über alle Aspekte Ihrer Website zu erhalten.

Hier erhalten Sie weitere Informationen zur Verwendung.

9. Andy.scss

Andy.scss ist eine Sammlung nützlicher Sass-Mixins, die Ihnen dabei helfen, das Erscheinungsbild einer Website mit Leichtigkeit zu entwickeln und dabei leicht zu bleiben. Es gibt Dutzende von Sass-Mixins, von Hintergründen bis zu Animationen. Hier werden fast alle gängigen CSS-Eigenschaften behandelt. Holen Sie es bei Github.