30 ressources incroyables pour les amoureux de Sass
Malgré les prédictions d'innombrables sceptiques, Sass n'a pas du tout été une mode, mais plutôt un ensemble d'outils remarquablement robuste qui améliore véritablement la création CSS.
Je suis un grand fan de Sass et je sais que beaucoup d'entre vous le sont aussi, j'ai donc compilé cette liste de trente ressources incroyables pour les amateurs de Sass. Vous y trouverez toutes sortes de goodies construits sur et pour Sass: frameworks, plugins, applications et bien plus encore.
Cadres et systèmes de grille
Boussole
Compass est le compagnon par excellence de Sass. Il regorge de mixins et d'outils prédéfinis qui rendent le travail avec Sass plus facile que jamais. Si vous aimez Sass mais n'avez pas franchi le pas et essayé Compass, il est temps d'y jeter un œil.
Bibliothèque Bourbon Sass Mixins
Si Compass vous semble exagéré, mais que vous aimez toujours l'idée de tirer parti de superbes mixins CSS3, consultez Bourbon. Après Compass, c'est certainement l'une des meilleures bibliothèques de mixage Sass que j'ai trouvées.
Bourbon Neat
Bourbon Neat est un système de grille construit avec Sass et Bourbon. C'est super simple et entièrement réactif.
Fondation
Foundation est le principal concurrent de Twitter Bootstrap. Les deux cadres ont une esthétique minimaliste, sont pleins de superbes pièces d'interface utilisateur et disposent de cadres réactifs. Il y a au moins une grande différence: Bootstrap est construit sur MOINS tandis que Foundation est construit sur Sass. Si vous êtes un fan de Sass, vous êtes probablement mieux avec Foundation.
Bootstrap Sass
Si vous êtes prêt à utiliser à la fois Bootstrap et Sass, consultez ce projet, qui réécrit essentiellement les composants LESS Bootstrap dans Sass.
Animate.sass
Animate.css est une bibliothèque d'animation CSS géniale sur laquelle j'ai déjà écrit. Animate.sass apporte la commodité de Sass à cette bibliothèque.
La forge
La description officielle le résume parfaitement: «Forge est une boîte à outils en ligne de commande gratuite pour démarrer et développer des thèmes WordPress dans un environnement ordonné en utilisant des langages frontaux comme Sass, LESS et CoffeeScript.»
Squelette-SASS
Skeleton a été le premier framework de grille responsive que j'aie jamais utilisé et j'ai toujours un penchant pour lui. Voici une refonte de Skeleton utilisant Sass.
Susy: Grilles réactives pour Compass
Les grilles étaient en fait au cœur de Compass, avant d'être supprimées au profit de la concentration sur d'autres aspects. Susy intensifie pour combler le vide et sert de moyen d'incorporer des grilles réactives dans Compass.
Cadre de gravité
Gravity est un framework HTML5 frontal robuste basé sur Sass.
Sans cadre
Frameless n'est pas tant un cadre qu'une suggestion pour une nouvelle façon de structurer vos grilles. Ce sont des trucs assez avancés alors assurez-vous de connaître vos côtelettes avant de l'essayer. Frameless n'est pas entièrement axé sur Sass, mais il existe un modèle Sass pour vous aider à démarrer.
Zen Grids
J'ai récemment écrit un morceau qui a chanté les louanges de Zen Grids. C'est probablement mon système de grille préféré à ce jour, et cela veut dire quelque chose puisque je suis un fanatique de la grille. Ce qui rend Zen Grids si génial, c'est qu'il exploite Sass de telle manière que vous obtenez tous les avantages d'un système de grille tout en conservant la liberté d'être complètement sémantique dans votre code. Que pourriez-vous demander de plus?
BlankWork - Système de grille flexible SASS
Blankwork ressemble beaucoup à Zen Grids. Il s'agit d'un système de grille flexible et réactif qui utilise Sass pour vous libérer des noms de classe non sémantiques.
320 et plus
320 et Up est un premier passe-partout réactif et mobile avec les versions LESS et Sass.
Gridset
Pour un examen approfondi de Gridset, consultez cet article. C'est l'un des meilleurs outils existants pour créer et gérer des grilles réactives. Les utilisateurs ont la possibilité de recevoir tout le code de sortie dans Sass.
Boutons et interface utilisateur
Boutons CSS3 par Chad Mazzola
Cet ensemble de boutons élégant utilise à la fois Sass et Bourbon pour travailler sa magie. Le résultat est une configuration de boutons vraiment superbes et bien développés pour votre prochain projet.
Zocial
Zocial est un framework Sass de boutons sociaux CSS3. Les boutons sont CSS3 et les icônes sont implémentées avec un mixin Sass @ font-face.
Boutons impertinents
Sassy Buttons est une extension de boussole qui vous aide à créer des boutons incroyablement personnalisables et super attrayants.
applications
Scout
Scout n'est pas le plus joli compilateur Sass et Compass, mais il a une chose très solide: c'est gratuit. Les autres peuvent vous coûter plus de 10-20 $, mais Scout fonctionne comme un charme, est multiplateforme et ne vous coûtera pas un centime.
CodeKit
CodeKit est la puissance d'un compilateur. Vous pouvez y jeter à peu près tout ce que vous voulez: MOINS, Sass, Stylus, CoffeeScript, cela va tout prendre et cracher le code standard que vous recherchez. Si vous avez 25 $ à brûler, allez-y.
LiveReload
LiveReload ressemble beaucoup à CodeKit, seulement il vit dans votre barre de menu et offre la commodité supplémentaire de rafraîchir l'aperçu de votre navigateur chaque fois qu'une sauvegarde est effectuée. C'est aussi seulement 9, 99 $.
Marteau
Hammer for Mac change la donne. Il injecte de la magie que vous n'auriez jamais cru possible de créer des sites statiques. Consultez mon avis ici pour le scoop complet. Parmi d'autres actions plus impressionnantes, Hammer compile également votre Sass. Comme c'est pratique!
Plugins
Sass.sugar
Les sucres sont des plugins pour MacRabbit's Espresso, qui continue d'être l'un de mes éditeurs de texte préférés. Sass.sugar ajoute la coloration syntaxique Sass à Espresso.
Texte sublime: Haml & Sass
Voici un plugin pour les utilisateurs de Sublime Text. Vous pouvez également vous tourner vers le gestionnaire de paquets dans ST2 pour un plugin Sass.
Plug-in Coda Sass
Nous avons couvert Sublime et Espresso, alors ne laissons pas de côté les utilisateurs de Coda. Voici votre plugin.
FireSass pour Firebug
FireSass permet à Firebug d'afficher le nom de fichier Sass d'origine et le numéro de ligne des styles CSS générés par Sass.
Autres goodies
Sass.js
Une implémentation JavaScript de Sass, parfaite pour les utilisateurs de Node.
Point d'arrêt
Breakpoint cherche à simplifier l'écriture de requêtes média avec Sass. «Breakpoint gère toutes les tâches lourdes, de l'écriture de la requête multimédia elle-même à la gestion des problèmes de compatibilité entre les navigateurs, afin que vous puissiez vous concentrer sur ce qui est important: vous assurer que votre site Web est à son meilleur.»
MVCSS
MVCSS n'est pas tant une ressource téléchargeable que c'est une méthode suggérée pour écrire CSS et Sass. Son concept est similaire à SMACSS et OOCSS.
Normalize.css (avec Sass ou Compass)
Normalize.css cherche à identifier et à éliminer les différences majeures dans la façon dont les différents navigateurs rendent HTML et CSS. Il s'agit d'un port Sass de ce fichier.
Qu'est-ce que j'ai raté?
Ces trente ressources représentent certains des meilleurs projets que la communauté Sass a à offrir, mais je suis sûr que j'en ai raté quelques-uns. Si vous connaissez de grandes ressources Sass ou si vous en avez construit vous-même, laissez un commentaire ci-dessous et faites-le nous savoir.
