Trotz der Vorhersagen zahlloser Skeptiker hat sich Sass nicht als Modeerscheinung erwiesen, sondern als bemerkenswert robuste Tools, die das CSS-Authoring wirklich verbessern.
Ich bin ein großer Sass-Fan und ich weiß, dass es auch viele von Ihnen sind, deshalb habe ich diese Liste von dreißig erstaunlichen Ressourcen für Sass-Liebhaber zusammengestellt. Darin finden Sie alle Arten von Goodies, die auf und für Sass aufgebaut sind: Frameworks, Plugins, Apps und vieles mehr.
Frameworks und Grid-Systeme
Kompass
Compass ist der Inbegriff für Sass. Es ist voll mit vorgefertigten Mixins und Tools, die die Arbeit mit Sass einfacher machen als je zuvor. Wenn Sie Sass lieben, aber Compass nicht ausprobiert haben, ist es an der Zeit, einen Blick darauf zu werfen.
Bourbon-Sass-Mixins-Bibliothek
Wenn Compass für Sie wie ein Overkill erscheint, Sie aber trotzdem die Idee mögen, einige großartige CSS3-Mixins zu nutzen, sollten Sie sich Bourbon ansehen. Nach Compass ist es definitiv eine der besseren Sass-Mixin-Bibliotheken, die ich gefunden habe.
Bourbon ordentlich
Bourbon Neat ist ein mit Sass und Bourbon erstelltes Rastersystem. Es ist super einfach und voll ansprechend.
Stiftung
Foundation ist der Hauptkonkurrent zu Twitter Bootstrap. Beide Frameworks haben eine minimalistische Ästhetik, sind voll mit großartigen UI-Elementen und verfügen über responsive Frameworks. Es gibt jedoch zumindest einen großen Unterschied: Bootstrap basiert auf LESS, Foundation auf Sass. Wenn Sie ein Sass-Fan sind, sind Sie mit Foundation wahrscheinlich besser aufgehoben.
Bootstrap Sass
Wenn Sie mit Bootstrap und Sass nicht zufrieden sind, überprüfen Sie dieses Projekt, das die LESS-Bootstrap-Komponenten im Wesentlichen in Sass umschreibt.
Animate.sass
Animate.css ist eine fantastische CSS-Animationsbibliothek, über die ich bereits geschrieben habe. Animate.sass bringt den Komfort von Sass in diese Bibliothek.
Schmiede
Die offizielle Beschreibung bringt es auf den Punkt: "Forge" ist ein kostenloses Befehlszeilen-Toolkit zum Bootstrapping und zum Entwickeln von WordPress-Designs in einer aufgeräumten Umgebung unter Verwendung von Front-End-Sprachen wie Sass, LESS und CoffeeScript.
Skelett-SASS
Das Skelett war das erste responsive Grid-Framework, das ich je verwendet habe, und ich habe immer noch eine Vorliebe dafür. Hier ist eine Überarbeitung des Skeletts mit Sass.
Susy: Responsive Raster für Kompass
Grids waren ursprünglich ein Kernbestandteil von Compass, bevor sie zugunsten anderer Aspekte herausgezogen wurden. Susy steigt auf, um die Lücke zu füllen, und dient dazu, responsive Raster in Compass einzubauen.
Schwerkraft-Rahmen
Gravity ist ein robustes Frontend-HTML5-Framework, das auf Sass basiert.
Rahmenlos
Frameless ist nicht so sehr ein Rahmen als Vorschlag für eine neue Art der Strukturierung Ihrer Netze. Es sind einige ziemlich fortgeschrittene Sachen, also stellen Sie sicher, dass Sie Ihre Chops kennen, bevor Sie es versuchen. Frameless ist nicht vollständig auf Sass fokussiert, aber es gibt eine Sass-Vorlage, um den Einstieg zu erleichtern.
Zen Grids
Ich habe kürzlich ein Stück geschrieben, in dem Zen Grids gelobt wurde. Es ist wahrscheinlich bis jetzt mein liebstes Netzsystem, und das sagt etwas, da ich ein Netzfanatiker bin. Was Zen Grids so großartig macht, ist, dass es Sass so nutzt, dass Sie alle Vorteile eines Rastersystems erhalten und gleichzeitig die Freiheit haben, in Ihrem Code völlig semantisch zu sein. Was könnte man mehr verlangen?
BlankWork - flexibles SASS-Netzsystem
Blankwork ähnelt Zen Grids. Es ist ein flexibles, responsives Gittersystem, das Sass verwendet, um Sie von nicht-semantischen Klassennamen zu befreien.
320 und höher
320 and Up ist eine reaktionsschnelle, mobile erste Heizplatte mit LESS- und Sass-Version.
Gridset
In diesem Artikel erfahren Sie mehr über Gridset. Es ist eines der besten Werkzeuge, das es gibt, um responsive Grids zu erstellen und zu verwalten. Benutzer haben die Möglichkeit, den gesamten Ausgabecode in Sass zu erhalten.
Schaltflächen & UI
CSS3 Buttons von Chad Mazzola
Dieser schicke Satz von Tasten verwendet sowohl Sass als auch Bourbon, um seine Magie zu entfalten. Das Ergebnis ist ein wirklich gut aussehender und gründlich entwickelter Button für Ihr nächstes Projekt.
Zocial
Zocial ist ein CSS3 Social Buttons Sass Framework. Die Schaltflächen sind CSS3 und die Symbole sind mit einem Sass @ font-face-Mixin implementiert.
Freche Knöpfe
Sassy Buttons ist eine Kompasserweiterung, mit der Sie unglaublich anpassbare und super attraktive Buttons erstellen können.
Apps
Erkunden
Scout ist nicht der schönste Compiler für Sass und Compass, aber es gibt eine wirklich solide Sache: Es ist kostenlos. Die anderen können Ihnen $ 10-20 übersteigen, aber Scout funktioniert wie ein Zauber, ist plattformübergreifend und kostet Sie keinen Cent.
CodeKit
CodeKit ist das Kraftpaket eines Compilers. Sie können so ziemlich alles, was Sie wollen, werfen: WENIGER, Sass, Stylus, CoffeeScript, es nimmt alles auf und spuckt den Standardcode aus, nach dem Sie suchen. Wenn du 25 $ zum Verbrennen hast, hol es dir.
LiveReload
LiveReload ähnelt CodeKit sehr stark, nur es befindet sich in Ihrer Menüleiste und bietet den zusätzlichen Komfort, die Browservorschau zu aktualisieren, wenn Sie speichern. Es ist auch nur 9,99 $.
Hammer
Hammer für Mac ist ein Spielwechsler. Es injiziert Magie, die Sie nie für möglich gehalten hätten, um statische Standorte zu bauen. Schauen Sie sich meine Rezension hier für den kompletten Umfang an. Hammer stellt unter anderem eindrucksvollere Aktionen zusammen. Wie praktisch!
Plugins
Sass.sugar
Sugars sind Plugins für MacRabbits Espresso, einer meiner Lieblings-Texteditoren. Sass.sugar fügt Espresso Sass-Syntaxhervorhebung hinzu.
Erhabener Text: Haml & Sass
Hier ist ein Plugin für Benutzer von Sublime Text. Sie können sich auch an den Paket-Manager in ST2 für ein Sass-Plugin wenden.
Coda Sass Plug-in
Wir haben Sublime und Espresso behandelt, also lassen wir Coda-Benutzer nicht aus. Hier ist dein Plugin.
FireSass für Firebug
Mit FireSass kann Firebug den ursprünglichen Sass-Dateinamen und die Zeilennummer der von Sass generierten CSS-Stile anzeigen.
Andere Goodies
Sass.js
Eine JavaScript-Implementierung von Sass, ideal für Node-Benutzer.
Haltepunkt
Breakpoint soll das Schreiben von Medienanfragen mit Sass vereinfachen. ? Breakpoint übernimmt alle wichtigen Aufgaben, vom Schreiben der Medienabfrage selbst bis hin zur Behandlung von Problemen mit Browsern, sodass Sie sich auf das Wesentliche konzentrieren können: Sicherstellen, dass Ihre Website optimal aussieht.
MVCSS
MVCSS ist keine herunterladbare Ressource, sondern eine empfohlene Methode zum Schreiben von CSS und Sass. Das Konzept ähnelt SMACSS und OOCSS.
Normalize.css (Mit Sass oder Kompass)
Normalize.css versucht, wesentliche Unterschiede bei der Darstellung von HTML und CSS durch verschiedene Browser zu ermitteln und zu beseitigen. Dies ist ein Sass-Port dieser Datei.
Was habe ich verpasst?
Diese dreißig Ressourcen stellen einige der besten Projekte dar, die die Sass-Community zu bieten hat, aber ich bin mir sicher, dass ich einige großartige Projekte verpasst habe. Wenn Sie von großen Sass-Ressourcen wissen oder welche selbst erstellt haben, hinterlassen Sie einen Kommentar und lassen Sie uns darüber wissen.