9 librerie Mixin per i progettisti Sass dovrebbero ottenere
Se utilizzi Sass nel tuo flusso di lavoro di sviluppo, conosci l'importanza dei mix. Quando vedi alcune cose che sono scritte ripetutamente e noiosamente in CSS, è qui che i mixin possono aiutarti a prevenire il lavoro ripetitivo. Un mixin contiene dichiarazioni CSS che puoi riutilizzare nel tuo sito.
Ci sono molti mix sono fatti dagli sviluppatori, per aiutarti quando lavori con Sass nel tuo sviluppo. La maggior parte copre cose che spesso si ripetono nei CSS. A partire dal adattarsi su più browser a creazione di pulsanti, animazioni ed effetti di transizione, trova questo e altro nelle seguenti 11 librerie di mixin che dovresti ottenere per lo sviluppo di Sass.
1. Bourbon
Bourbon è una libreria Sass che contiene mixin, funzioni e addon che ti permettono di semplificare la creazione di fogli di stile per l'uso cross-browser. Per me, questo è il più meraviglioso mixin di Sass. Contiene quasi tutto ciò di cui hai bisogno per modellare il tuo sito web mantenendo il tuo foglio di stile leggero.
Controlla la documentazione completa per utilizzare ogni mixin e funzione disponibili.
2. Sass CSS3 Mixins
Sass CSS3 Mixins fornisce mixins che funzionano su diversi browser. Qui troverai una serie di mixin di best practice come sfondo, bordo, riquadro, colonna, font-face, transform, transition e animation. È sufficiente per le tue esigenze di stile. Per usare, importa il css3-mixins.scss e chiama il mixin nella tua classe CSS.
Scarica questo mixin qui.
3. CssOwl
CssOwl fornisce mixaggi utili per impostare la posizione di un elemento (relativo o assoluto) e aggiungere il contenuto con lo pseudo-selettore ( :dopo e :prima). Aiuta anche quando vuoi creare elementi sprite: il mixin dà flessibilità per impostare la posizione dell'immagine nel tuo sprite. Oltre a Sass, la libreria di mixin CssOwl è disponibile anche per LESS e Stylus.
4. Punto di interruzione Sass
Il punto di interruzione consente di effettuare query sui media tramite Sass in modo semplice. Con Breakpoint, è possibile creare variabili e assegnargli un valore che definisca il min-width o larghezza massima di domande sui media. Poiché la variabile che hai creato ha un nome significativo, puoi chiamarla facilmente per l'uso in Sass.
5. Scut
Scut contiene una serie di mixins riutilizzabili di Sass, segnaposti, funzioni e variabili che consentono di implementare facilmente modelli di codice stile comuni. Fornisce il codice best-practice per creare materiale web come layout di pagina e in stile tipografico. È possibile ridurre la ripetizione durante la scrittura del codice riutilizzando il codice più spesso. Così, aiutandoti a diventare più organizzato nel processo.
6. Zafferano
Con Saffron, puoi aggiungere animazioni e transizioni CSS3 con facilità. Sono disponibili una dozzina di animazioni e transizioni, tra cui dissolvenza in apertura / chiusura, slide in / out, incremento in / out e effetti vari come scuotimento, oscillazione, rimbalzo e altri. Per usare Saffron basta includere il mixin nella dichiarazione Sass e chiamare il nome dell'effetto all'interno della tua classe CSS. Puoi ottenere Saffron installandolo usando Bower o Gem o semplicemente scaricandolo manualmente da Github.
7. Digitare Impostazioni
TypeSettings è un tipo di toolkit per Sass. Imposta la dimensione del font in scala modulare usando em (anziché rems o pixel), ritmi verticali e titoli basati sul rapporto reattivo. Puoi installarlo anche con Bower, scaricare la versione o clonare il repository. Per maggiori dettagli, controlla la sua pagina.
8. Linea Sass
Sass Line è un mixin di Sass che ti aiuta a migliorare la tipografia. Usa l'unità di remi sul tuo font in modo che tu possa lavorarlo in proporzione alla griglia della linea di base. Sass Line utilizza un ritmo verticale preciso basato sulla griglia della linea di base e ti consente di impostare una scala modulare per ciascuno dei tuoi punti di interruzione per ottenere buone proporzioni su tutti gli aspetti del tuo sito web.
Vai qui per avere maggiori dettagli su come usarlo.
9. Andy.scss
Andy.scss è una raccolta di utili mixin di Sass, creati per aiutarti a sviluppare l'aspetto di un sito web con facilità pur mantenendo la luce. Sono disponibili dozzine di mixin Sass, dagli sfondi alle animazioni. Quasi tutte le proprietà CSS di uso comune sono trattate qui. Scaricalo da Github.
Altri post su Sass:
- Iniziare con Sass
- Scavando nel Sass
- Come compilare Sass con il testo sublime
- Utilizzando Bootstrap 3 con Sass
- Come costruire una VCard online con Sass & Compass
- Preprocessori CSS Confronto: Sass vs. DI MENO
- Stili di stile sintatticamente fantastici: utilizzo di Compass in Sass
- Come convertire CSS in Sass e SCSS
