Malgré les prédictions d'innombrables sceptiques, Sass ne s'est pas révélé être une mode, mais plutôt un ensemble d'outils remarquablement robustes qui améliorent réellement la création CSS.
Je suis un grand fan de Sass et je sais que vous êtes nombreux à le faire. J'ai donc compilé cette liste de trente ressources étonnantes pour les amoureux de Sass. Vous y trouverez toutes sortes de goodies construits sur et pour Sass: des frameworks, des plugins, des applications et bien plus encore.
Frameworks et systèmes de grille
Boussole
Compass est le compagnon par excellence de Sass. Il regorge de mixins prédéfinis et d'outils qui facilitent plus que jamais le travail avec Sass. Si vous aimez Sass mais que vous n'avez pas franchi le pas et essayé Compass, il est temps de jeter un coup d'œil.
Bibliothèque Bourbon Sass Mixins
Si Compass semble excessif pour vous, mais que vous aimez toujours utiliser des mixins CSS3 impressionnants, consultez Bourbon. Après Compass, c'est certainement l'une des meilleures bibliothèques Sass mixin 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 totalement réactif.
Fondation
Foundation est le principal concurrent de Twitter Bootstrap. Les deux cadres ont une esthétique minimaliste, regorgent d’excellentes pièces d’interface utilisateur et comportent des cadres réactifs. Il y a au moins une grande différence cependant: Bootstrap est construit sur LESS alors que Foundation est construit sur Sass. Si vous êtes un fan de Sass, vous ferez 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 superbe bibliothèque d'animation CSS 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 permettant d’amorcer et de développer des thèmes WordPress dans un environnement ordonné utilisant des langages frontaux tels que Sass, LESS et CoffeeScript."
Squelette-SASS
Skeleton a été le premier framework de grille responsive que j'ai jamais utilisé et je l’aime toujours beaucoup. Voici une retouche de Skeleton utilisant Sass.
Susy: Grilles réactives pour Compass
Les grilles constituaient en fait une partie essentielle de Compass, avant d’être mises de côté au lieu de se concentrer sur d’autres aspects. Susy intervient pour combler le vide et constitue un moyen d'intégrer des grilles réactives dans Compass.
Cadre de gravité
Gravity est un framework HTML5 frontal robuste construit sur Sass.
Sans cadre
Sans cadre n'est pas tant un cadre que la suggestion d'une nouvelle façon de structurer vos grilles. Il s’agit de choses assez avancées, alors assurez-vous de bien connaître vos côtelettes avant de les essayer. Frameless n'est pas entièrement centré sur Sass, mais il existe un modèle Sass pour vous aider à démarrer.
Grilles Zen
J'ai récemment écrit un article qui chantait les louanges de Zen Grids. C'est probablement mon système de réseau préféré à ce jour, ce qui en dit long puisque je suis un fanatique de réseau. Ce qui rend Zen Grids si formidable, c’est qu’il exploite Sass de telle sorte que vous bénéficiez de tous les avantages d’un système de grille tout en conservant la liberté d’être totalement sémantique dans votre code. Que pourriez-vous demander de plus?
BlankWork - Système de grilles flexible SASS
Le Blankwork ressemble beaucoup à Zen Grids. C'est 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 and Up est une première chaudière réactive 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 de Chad Mazzola
Cet ensemble de boutons attrayants utilise à la fois Sass et Bourbon pour travailler sa magie. Le résultat est une configuration de boutons vraiment superbes et minutieusement 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.
Badges publicitaires
Sassy Buttons est une extension de la boussole qui vous aide à créer des boutons incroyablement personnalisables et super attrayants.
applications
Scout
Scout n'est pas le plus joli compilateur Sass and Compass, mais il a une chose vraiment solide: c'est gratuit. Les autres peuvent vous rapporter plus de 10 à 20 dollars, mais Scout fonctionne à merveille, est multi-plateforme et ne vous coûte pas un cent.
CodeKit
CodeKit est la centrale d'un compilateur. Vous pouvez y jeter à peu près tout ce que vous voulez: LESS, Sass, Stylus, CoffeeScript, il va tout prendre et cracher le code standard que vous recherchez. Si vous avez 25 $ à graver, allez le chercher.
LiveReload
LiveReload ressemble beaucoup à CodeKit, mais il reste dans la barre de menus et permet d'actualiser l'aperçu de votre navigateur chaque fois qu'une sauvegarde est effectuée. C'est aussi seulement 9,99 $.
Marteau
Hammer for Mac est un changeur de jeu. Il injecte une magie que vous n'auriez jamais cru possible dans la construction de sites statiques. Consultez mon avis ici pour le scoop complet. Entre 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 reste l’un de mes éditeurs de texte préférés. Sass.sugar ajoute la surbrillance de la syntaxe Sass à Espresso.
Texte sublime: Haml & Sass
Voici un plugin pour les utilisateurs de Sublime Text. Vous pouvez aussi vous tourner vers le gestionnaire de paquets dans ST2 pour un plugin Sass.
Coda Sass Plug-in
Nous avons couvert Sublime et Espresso, ne laissons donc pas 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 nœuds.
Point d'arrêt
Breakpoint cherche à simplifier l’écriture de requêtes multimédia avec Sass. "Breakpoint prend en charge tous les problèmes, de la rédaction de la requête multimédia en passant par la gestion des problèmes de compatibilité entre navigateurs, de sorte que vous puissiez vous concentrer sur l'essentiel: vous assurer que votre site Web est à son meilleur"
MVCSS
MVCSS n'est pas une ressource téléchargeable mais 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 manière dont les différents navigateurs rendent HTML et CSS. Ceci est un port Sass de ce fichier.
Qu'est-ce que j'ai raté?
Ces trente ressources représentent quelques-uns des meilleurs projets proposés par la communauté Sass, mais je suis certain d’avoir manqué quelques excellents projets. Si vous connaissez d’excellentes ressources Sass ou en avez vous-même construit une, laissez un commentaire ci-dessous et laissez-le nous savoir.