9 bibliothèques Mixin pour les concepteurs Sass devraient obtenir

Si vous utilisez Sass dans votre flux de travail de développement, vous connaissez l’importance des mixins. Quand vous voyez des choses qui sont écrites de manière répétée et fastidieuse en CSS, c'est là que mixins peut vous aider à éviter le travail répétitif. Un mixin contient des déclarations CSS que vous pouvez réutiliser dans votre site..

Il existe de nombreux mixins réalisés par les développeurs, pour vous aider lorsque vous travaillez avec Sass dans votre développement. La plupart couvrent des choses qui se répètent souvent en CSS. De adaptation sur plusieurs navigateurs à créer des boutons, des animations et des effets de transition, trouvez ceci et plus encore dans les 11 bibliothèques de mixin suivantes que vous devriez obtenir pour votre développement Sass.

1. Bourbon

Bourbon est une bibliothèque Sass qui contient un mix, des fonctions et des addons qui vous permettent de simplifier la création de feuilles de style pour une utilisation sur plusieurs navigateurs. Pour moi, c'est le plus merveilleux mix Sass. Il contient presque tout ce dont vous avez besoin pour styler votre site Web tout en maintenant votre feuille de style légère.

Consultez la documentation complète pour utiliser chaque mixin et fonction disponible.

2. Sass CSS3 Mixins

Sass CSS3 Mixins fournit des mixins qui fonctionnent sur différents navigateurs. Vous trouverez ici un tas de bonnes pratiques de mixage telles que l’arrière-plan, les bordures, les zones, les colonnes, les polices, la transformation, la transition et l’animation. C'est assez pour vos besoins de style. Pour utiliser, importez le css3-mixins.scss et appelez le mixin dans votre classe CSS.

Téléchargez ce mixin ici.

3. CssOwl

CssOwl fournit des mixins utiles pour définir la position d’un élément (relatif ou absolu) et ajouter du contenu avec le pseudo-sélecteur ( :après et :avant). Cela vous aide également lorsque vous souhaitez créer des éléments d'image-objet: le mixin vous permet de définir la position de l'image dans votre image-objet. En plus de Sass, la bibliothèque de mixages CssOwl est également disponible pour LESS et Stylus..

4. Point d'arrêt Sass

Breakpoint vous aide à effectuer des requêtes multimédia via Sass de manière simple. Avec Point d'arrêt, vous pouvez créer des variables et lui attribuer une valeur définissant la largeur min ou largeur maximale des requêtes des médias. Comme la variable que vous avez créée a un nom explicite, vous pouvez l’appeler facilement pour l’utiliser dans Sass..

5. Scut

Scut contient un ensemble de mixins Sass réutilisables, d'espaces réservés, de fonctions et de variables qui vous permettent d'implémenter facilement des modèles de code de style courants. Il fournit un code de meilleure pratique pour créer des éléments Web tels que des mises en page et des styles de typographie. Vous pouvez réduire la répétition lorsque vous écrivez du code en le réutilisant plus souvent. Ainsi, vous aider à être plus organisé dans le processus.

6. Safran

Avec Safran, vous pouvez facilement ajouter des animations et des transitions CSS3. Il existe une douzaine d'animations et de transitions disponibles, notamment des ouvertures et des fondus en incrustation, des incrustations en entrée et en sortie, ainsi que divers effets tels que shake, teeter, bounce, etc. Pour utiliser Saffron, incluez simplement le mixin dans la déclaration Sass et appelez le nom de l'effet dans votre classe CSS. Vous pouvez obtenir du Safran en l'installant à l'aide de Bower ou de Gem, ou simplement le télécharger manuellement à partir de Github..

7. Paramètres de type

TypeSettings est un type de boîte à outils pour Sass. Il définira la taille de la police en échelle modulaire en utilisant em (au lieu de rems ou pixels), le rythme vertical et les titres basés sur le ratio réactif. Vous pouvez également installer celui-ci avec Bower, télécharger la version ou cloner le référentiel. Pour plus de détails, consultez sa page.

8. Sass Line

Sass Line est un mix Sass qui vous aide à améliorer la typographie. Il utilise l’unité rems de votre police pour que vous puissiez l’utiliser proportionnellement à partir de la grille de base. Sass Line utilise un rythme vertical précis basé sur la grille de la ligne de base et vous permet de définir une échelle modulaire pour chacun de vos points d'arrêt afin d'obtenir de bonnes proportions pour tous les aspects de votre site Web..

Allez ici pour avoir plus de détails sur son utilisation.

9. Andy.scss

Andy.scss est une collection de mixins Sass utiles, conçus pour vous aider à développer facilement le look d'un site Web tout en le maintenant léger. Des dizaines de mixins Sass sont disponibles, des arrière-plans aux animations. Presque toutes les propriétés CSS couramment utilisées sont couvertes ici. Obtenez-le à Github.

Plus de messages sur Sass:

Débuter avec Sass
Creuser dans Sass
Comment compiler Sass avec Sublime Text
Utiliser Bootstrap 3 avec Sass
Comment construire une carte virtuelle en ligne avec Sass & Compass
Pré-processeurs CSS comparés: Sass vs. MOINS
Stylesheets Syntactically Awesome: Utilisation de Compass In Sass
Comment convertir CSS en Sass & SCSS