Share
Susy è un potente set di mixin di Sass per la creazione di layout basati sulla griglia.
Cosa c'è di bello in Susy? Ti mostreremo le basi per lavorare con Susy in questo tutorial, ma ecco una lista di professionisti da considerare:
Questi tre semplici pro sono più che sufficienti per meritare di dare un'occhiata a Susy. Iniziamo!
Innanzitutto, devi essere abbastanza familiare con Sass per scrivere e compilarlo. Al momento della stesura di questo documento, Susy implementa alcune funzionalità di Sass che al momento non sono supportate da LibSass (il compilatore Sass basato su C) quindi sarà necessario utilizzare la versione Ruby di Sass. Inizia con l'installazione di Sass e scopri come usare il orologio comando, che sarà essenziale per lavorare con Sass in generale, così come Susy.
Successivamente, dovrai installare Susy sul tuo computer. Poiché l'unica dipendenza di Susy è Sass stesso, puoi scaricare il file zip del progetto da GitHub e copiare il contenuto della cartella Sass nel tuo progetto.
Successivamente, dovrai importare Susy nel tuo file Sass.
@import "susy";
Questo presuppone che tu sia in una directory con i contenuti della cartella Sass.
Susy è fondamentalmente un insieme di mix, che sono come funzioni in Sass. Questi mixin sono chiamati all'interno del tuo codice Sass, e quando viene eseguito il compilatore Sass, guarderà le definizioni di mixin nei file Susy e determinerà l'output corretto.
Il mixin più importante in Susy è il campata mixin, che assomiglia a questo:
.contenuto @include span (20%);
Il campata mixin si basa anche sul contenitore mixin, che imposta ciò che Susy chiama "contesto di layout".
.container @include container (1180px);
Susy consente inoltre di creare span in base a un numero predefinito di colonne in un dispositivo a griglia:
.quarter @include span (4 of 12);
Il potere di Susy va ben oltre la griglia media, consentendo configurazioni di rete meno che normali. Iniziamo con un semplice esempio: un layout a 9 colonne.
.nono @include span (1 di 9);
Susy ti consente di configurare la configurazione tramite $ susy variabile. La creazione di una mappa Sass ti consente di determinare una serie di preferenze su come Susy lavora per disporre le tue espansioni. Susy implementa a disposizione mixin che emette una mappa di configurazione. Ecco le impostazioni predefinite, prese direttamente dalla documentazione di Susy.
$ susy: (flow: ltr, math: fluid, output: float, gutter-position: after, container: auto, container-position: center, colonne: 4, gutters: .25, column-width: false, global-box -misura: content-box, last-flow: to, debug: (immagine: nascondi, colore: rgba (# 66f, .25), output: background, toggle: in alto a destra,), use-custom: (background-image : true, background-options: false, dimensionamento della casella: true, clearfix: false, rem: true,));
Puoi sovrascrivere qualsiasi impostazione specifica aggiungendola alla tua $ susy carta geografica:
$ susy: (colonne: 16, ultimo flusso: da)
Opzioni comunemente modificate sono il conteggio delle colonne, la larghezza del margine e il produzione opzione. Ognuna di queste opzioni di configurazione fa qualcosa di diverso.
Per il bene di questo tutorial, non passeremo attraverso tutte le opzioni di configurazione (la documentazione di Susy fa un ottimo lavoro di spiegazione). Invece, passiamo attraverso alcuni esempi pratici di come potresti usare Susy.
Qui, possiamo vedere un uso di base delle portate e dei contenitori:
Nota: per apprezzare le colonne a tutta larghezza, dai un'occhiata alla versione a schermo intero.
Ci sono alcune cose da notare con questo esempio. Abbiamo creato un esempio forzato di dashboard. Abbiamo anche incluso un piccolo bit di JavaScript che recupera immagini di utenti fasulli dall'API di uifaces.com.
I pezzi specifici di Susy sono le colonne. In questo esempio, abbiamo creato un layout reattivo che utilizza il @include span () sintassi. Stiamo anche utilizzando le funzionalità di nidificazione di SCSS in alcuni punti. Si noti che Susy si adatta perfettamente alla normale sintassi della query multimediale. Abbiamo creato un contenitore dal .statistiche sezione usando contenitore @include;.
Va anche notato che ci sono colonne annidate in questo particolare esempio; il .avatar gli elementi sono nidificati all'interno di un'altra colonna Susy, e questo funziona perfettamente perché Susy utilizza le larghezze di fluido per impostazione predefinita.
Successivamente, possiamo vedere un uso della stenografia di Susy per il layout con una griglia che ha colonne più grandi nel mezzo piuttosto che all'esterno.
In questo esempio, stiamo usando alcune opzioni diverse che dovrebbero sembrare nuove. Per prima cosa, stiamo creando il nostro markup usando Haml. Haml è una sostituzione markup sensibile agli spazi bianchi per HTML costruita su Ruby. Consideralo un po 'come un preprocessore per HTML.
Diamo un'occhiata a ciò che il nostro esempio crea.
.brick-list
Questo crea a Questa linea rientrata ripete 30 volte qualsiasi cosa sia annidata all'interno della stessa indentazione. Ciò significa che tutto ciò che viene emesso sarà all'interno del div che abbiamo creato sopra con Lo vediamo all'interno del nostro Un'altra parte importante di queste linee è il La griglia Susy è unica in questo esempio; impostiamo una variabile di griglia con la linea: Questa variabile sarà passata a Susy nel nostro Quindi utilizziamo questa griglia per tutto l'esempio, inserendo il nostro Ecco lo stesso esempio, con un layout asimmetrico diverso. Come puoi vedere, le griglie non convenzionali sono semplici da realizzare e Susy rende il controllo della rete potente un compito piacevole. Susy offre un modo più flessibile e meno ponderato di creare i propri schemi di griglia senza forzare l'adozione di un set predeterminato di CSS. Grazie a questa flessibilità, Susy può essere rapidamente appresa e inserita in un progetto senza doversi impegnare completamente a utilizzarla in ogni singola dichiarazione CSS creata. Sia che tu determini che Susy è giusto per te o no, come sviluppatore front-end dovresti almeno essere a conoscenza di tutti gli strumenti di pre-elaborazione disponibili. Stanno diventando un set di strumenti chiave per gli sviluppatori moderni.brick-list.- 30.times do | i |
.brick-list. Il | I | la porzione passa nella corrente indice, che è il conteggio del ciclo, a partire da 0. Quindi, per esempio, durante la nostra quinta volta attraverso il ciclo, io sarebbe uguale a 4. .col% img src: "http://hhhhold.com/jpeg/700?v=#i"
30 volte ciclo continuo. Il .col crea a div con un classe di col. Il % img ... crea un # , che ti permette di stampare il io indice variabile (questo è chiamato interpolazione, se vuoi saperne di più, Hugo Giraudel spiega tutto ciò che devi sapere). Usiamo questa variabile nell'URL come parametro in modo che le immagini che carichiamo non siano tutte uguali.$ grid: (1 2 5 5 2 1);
campata mixare chiamate e letture creare una griglia con sei colonne; la prima colonna dovrebbe essere di larghezza relativa di 1, la seconda colonna di larghezza relativa di 2, la terza colonna di larghezza relativa di 5, ecc...col divs alle posizioni iniziali di 1a, 3a e 5a colonna e che si estendono su 2 colonne usando il nth-child Regola CSS. Se dovessimo modificare questa stessa griglia per avere ogni colonna con la stessa larghezza di colonna relativa, sarebbe simile a questa.Conclusione
Accentsconagua