30 risorse straordinarie per gli amanti del Sass

Nonostante le previsioni di innumerevoli scettici, Sass non si è rivelato affatto una moda passeggera, ma piuttosto un insieme di strumenti straordinariamente robusti che migliorano davvero l'authoring CSS.

Sono un grande fan di Sass e so che anche molti di voi lo sono, quindi ho compilato questo elenco di trenta incredibili risorse per gli amanti del Sass. In esso troverai tutti i tipi di chicche costruite su e per Sass: framework, plugin, app e molto altro.

Strutture e sistemi di griglia

Bussola

Compass è il compagno per eccellenza di Sass. È pieno zeppo di mixin e strumenti predefiniti che rendono il lavoro con Sass più facile che mai. Se ami il Sass ma non hai fatto il grande passo e hai provato Compass, è tempo di dare un'occhiata.

Biblioteca Bourbon Sass Mixins

Se Compass sembra eccessivo per te, ma ti piace ancora l'idea di sfruttare alcuni fantastici mixin CSS3, dai un'occhiata a Bourbon. Dopo Compass, è sicuramente una delle migliori librerie di mixin Sass che ho trovato.

Bourbon Neat

Bourbon Neat è un sistema a griglia costruito con Sass e Bourbon. È super semplice e completamente reattivo.

Fondazione

Foundation è il principale concorrente di Twitter Bootstrap. Entrambi i framework hanno un'estetica minimalista, sono pieni di grandi pezzi dell'interfaccia utente e dispongono di framework reattivi. C'è almeno una grande differenza: Bootstrap è basato su MENO mentre Foundation è basato su Sass. Se sei un fan di Sass, probabilmente stai meglio con Foundation.

Bootstrap Sass

Se non hai ancora utilizzato Bootstrap e Sass, dai un'occhiata a questo progetto, che essenzialmente riscrive i componenti LESS Bootstrap a Sass.

Animate.sass

Animate.css è una fantastica libreria di animazione CSS di cui ho già scritto. Animate.sass porta la comodità di Sass in questa libreria.

Fucina

La descrizione ufficiale lo riassume perfettamente: "Forge è un toolkit gratuito da riga di comando per l'avvio rapido e lo sviluppo di temi WordPress in un ambiente ordinato che utilizza linguaggi front-end come Sass, LESS e CoffeeScript."

Skeleton-SASS

Skeleton è stato il primo framework a griglia reattivo che io abbia mai usato e ho ancora un debole per questo. Ecco una rielaborazione di Skeleton usando Sass.

Susy: griglie reattive per Compass

Le griglie erano in realtà una parte fondamentale di Compass, prima di essere rimosse per favorire la concentrazione su altri aspetti. Susy si fa avanti per riempire il vuoto e serve come modo per incorporare griglie reattive in Compass.

Quadro di gravità

Gravity è un solido framework HTML5 front-end basato su Sass.

senza telaio

Frameless non è tanto un framework quanto un suggerimento per un nuovo modo di strutturare le tue griglie. È un materiale piuttosto avanzato, quindi assicurati di conoscere le tue costolette prima di provarlo. Frameless non è completamente focalizzato su Sass, ma c'è un modello Sass per iniziare.

Griglie Zen

Di recente ho scritto un pezzo che ha cantato gli elogi di Zen Grids. È probabilmente il mio sistema di griglia preferito fino ad oggi, e questo dice qualcosa dal momento che sono un fanatico della griglia. Ciò che rende Zen Grids così eccezionale è che sfrutta il Sass in modo tale da ottenere tutti i vantaggi di un sistema a griglia mantenendo la libertà di essere completamente semantico nel tuo codice. Cosa si può chiedere di più?

BlankWork - Gridystem SASS flessibile

Il blankwork è molto simile a Zen Grids. È un sistema di griglia flessibile e reattivo che utilizza Sass per liberarti di nomi di classe non semantici.

320 e fino

320 and Up è una prima piastra mobile reattiva e mobile con entrambe le versioni LESS e Sass.

Gridset

Per uno sguardo approfondito a Gridset, leggi questo articolo. È uno dei migliori strumenti esistenti per la creazione e la gestione di reti reattive. Gli utenti hanno la possibilità di ricevere tutto il codice di output in Sass.

Pulsanti e interfaccia utente

Pulsanti CSS3 di Chad Mazzola

Questo elegante set di pulsanti utilizza sia Sass che Bourbon per creare la sua magia. Il risultato è un set di pulsanti davvero belli e completamente sviluppati per il tuo prossimo progetto.

Zocial

Zocial è un framework Sass per pulsanti social CSS3. I pulsanti sono CSS3 e le icone sono implementate con un mixin Sass @ font-face.

Bottoni Sassy

Sassy Buttons è un'estensione della bussola che ti aiuta a creare pulsanti incredibilmente personalizzabili e super attraenti.

applicazioni

esploratore

Scout non è il più bel compilatore di Sass e Compass, ma ha una cosa davvero solida: è gratuito. Gli altri possono farti guadagnare $ 10-20, ma lo scout funziona come un incantesimo, è multipiattaforma e non ti costerà un centesimo.

CodeKit

CodeKit è un motore di un compilatore. Puoi lanciare praticamente tutto quello che vuoi: MENO, Sass, Stilo, CoffeeScript, prenderà tutto e sputerà il codice standard che stai cercando. Se hai $ 25 da bruciare, vai a prenderlo.

LiveReload

LiveReload è molto simile a CodeKit, solo che vive nella barra dei menu e viene fornito con la comodità aggiuntiva di aggiornare l'anteprima del browser ogni volta che viene effettuato un salvataggio. È anche solo $ 9, 99.

Martello

Hammer per Mac è un punto di svolta. Inietta una magia che non avresti mai pensato possibile nella costruzione di siti statici. Dai un'occhiata alla mia recensione qui per lo scoop completo. Tra le altre azioni più impressionanti, Hammer compila anche il tuo Sass. Quanto conveniente!

plugin

Sass.sugar

Gli zuccheri sono plugin per MacRabbit's Espresso, che continua ad essere uno dei miei editor di testi preferiti. Sass.sugar aggiunge l'evidenziazione della sintassi di Sass a Espresso.

Testo sublime: Haml & Sass

Ecco un plugin per gli utenti di Sublime Text. Puoi anche passare al gestore dei pacchetti in ST2 anche per un plugin Sass.

Plug-in Coda Sass

Abbiamo coperto Sublime ed Espresso, quindi non tralasciamo gli utenti di Coda. Ecco il tuo plugin.

FireSass per Firebug

FireSass consente a Firebug di visualizzare il nome file e il numero di riga Sass originali degli stili CSS generati da Sass.

Altre chicche

Sass.js

Un'implementazione JavaScript di Sass, perfetta per gli utenti Node.

Punto di rottura

Breakpoint cerca di semplificare la scrittura di media query con Sass. "Breakpoint gestisce tutto il lavoro pesante, dalla stesura della query media stessa, alla gestione dei problemi di compatibilità tra browser, in modo che tu possa concentrarti su ciò che è importante: assicurarti che il tuo sito web appaia al meglio."

MVCSS

MVCSS non è tanto una risorsa scaricabile in quanto è un metodo suggerito per scrivere CSS e Sass. È simile nel concetto a SMACSS e OOCSS.

Normalize.css (con Sass o bussola)

Normalize.css cerca di identificare ed eliminare le principali differenze nel modo in cui i diversi browser visualizzano HTML e CSS. Questa è una porta Sass di quel file.

Cosa mi sono perso?

Queste trenta risorse rappresentano alcuni dei migliori progetti che la comunità di Sass ha da offrire, ma sono sicuro di aver perso alcuni grandi progetti. Se conosci grandi risorse di Sass o le hai costruite tu stesso, lascia un commento qui sotto e facci sapere.