I preprocessori come Sass ci stanno aiutando a flettere i muscoli di sviluppo in quasi tutte le aree del nostro CSS. Variabili, mixin, ereditarietà e molte altre fantastiche funzionalità rendono la codifica più facile e concisa che mai.
Che ne dici di sfruttare Sass per il responsive design o, più specificamente, per le query sui media? Ci sono delle caratteristiche di Sass che si abbinano particolarmente bene alle query sui media? C'è qualcosa da evitare? Unisciti a me mentre sperimento e scopri le risposte.
In che modo le funzionalità di base di Sass funzionano con le query multimediali?
Ultimamente ho fatto molte sperimentazioni con Sass e le query sui media per vedere cosa funziona e cosa no. I risultati sono abbastanza vari: alcune cose funzionano e altre no. Nel complesso, non c'è davvero nulla di abbastanza impressionante da cambiare completamente il modo in cui si usano le media query, ma vale comunque la pena di esaminare alcuni esempi che illustrano come i due lavorano insieme.
Variabili all'interno di una query multimediale: sì
Il nostro primo test esamina se una variabile impostata in Sass viene trasferita o meno nel corpo di una query multimediale. La domanda è di ambito: Posso impostare una variabile al di fuori di una query multimediale e quindi utilizzarla all'interno di una query multimediale?
Si scopre che questo funziona bene. La nostra generica variabile fontsize imposta efficacemente la dimensione del carattere a 10px all'interno della query multimediale.
Variabili come punti di interruzione: no
La mia prossima domanda era se potessi usare o meno le variabili per impostare i miei punti di interruzione. Non sono sicuro che questa sarebbe mai stata una buona idea, ma più fondamentale di quella domanda era se fosse o meno possibile. Cosa succede quando provo a fare questo?
Apparentemente questo non è un uso valido delle variabili Sass in quanto questo codice genera un errore e non verrà compilato. Ho provato la stessa cosa in MENO e ho ricevuto risultati ugualmente inutili. Questa volta è stato compilato senza generare un errore ma il valore non è stato riportato correttamente.
Estensione di una query multimediale: Sort Of?
L'estensione funziona con le query multimediali, ma è importante sapere Come funziona perché i risultati potrebbero non essere ciò che pensi.
Il nostro primo esempio usa @extend come se fosse pensato per essere usato. Qui ho detto alla classe errorTwo di ereditare gli stili della classe errorOne e di impostare il colore su blu.
Prevedibilmente, questo produce esattamente il risultato che vogliamo. @Extend non si preoccupa di trovarsi all'interno di una query multimediale, funziona allo stesso modo che in qualsiasi altra parte.
Quindi cosa succede quando giochiamo un po 'con questa struttura e mettiamo parte del nostro codice al di fuori della query multimediale? Qui ho impostato gli stili per errorOne e errorTwo al di fuori della query multimediale e poi ho tentato di utilizzare alcune pratiche di ereditarietà discutibili ripristinando l'errore Due stili all'interno della query multimediale tramite un'estensione di errorOne.
Ecco il CSS compilato da questo codice. La speranza era che gli errori errorOne al di fuori della media query fossero applicati a errorTwo all'interno della media query, ma invece @extend funzionava come se fosse stato progettato per: combinava i selettori nella posizione originale e applicava gli stili condivisi.
È importante notare che il codice sopra riportato è molto diverso dal CSS previsto, che viene mostrato di seguito. Qui errorOne e errorDue sono definiti individualmente con stili diversi, e quindi quando la query multimediale ha effetto, errorTwo viene impostato per corrispondere a errorOne con l'aggiunta di un cambiamento di colore.
Mixin all'interno di una query multimediale: sì
Proprio come con le variabili, possiamo dichiarare un mixin al di fuori di una query multimediale e applicarlo all'interno di una query multimediale. Ad esempio, qui ho impostato un mix di font con alcuni stili di testo e poi l'ho chiamato all'interno di una query multimediale.
Rollare una query multimediale in un mixin: no
Da qui ti starai chiedendo se puoi effettivamente solo spostare un'intera query multimediale in un mixin e quindi passare alcuni argomenti quando vuoi implementarlo. Per quanto posso dire, non c'è modo di farlo in Sass, LESS o Stylus.
Nesting Media Queries
Finora non abbiamo avuto grandi sorprese. Per la maggior parte, tutto funziona come ci si aspetterebbe con la possibile eccezione dei breakpoint che non accettano variabili. Il nostro prossimo argomento di esplorazione è una funzionalità incorporata in Sass creata appositamente per le query multimediali: nesting.
Sass ti permette di nidificare tutti i tipi di codice. Non è certamente un requisito quando si programma con Sass ma la funzione è presente se lo si desidera. Ad esempio, supponiamo di volere un modo più conciso per scrivere il seguente CSS:
Con Sass, possiamo risparmiarci la fatica di creare un blocco dichiarazione separato e solo annidare gli stili di hover all'interno della classe button.
Questa stessa logica può essere utilizzata per applicare query multimediali a elementi specifici. Invece di creare una sezione dedicata che includa tutte le tue query multimediali, puoi nidificarle tutte e quindi associarle agli stili che stanno modificando. Ecco un esempio:
Pro e contro di Nesting Media Queries
L'idea alla base delle query sui media di nesting è decente, almeno in superficie. Come ho accennato in precedenza, si attacca alle query multimediali con gli stili originali che stanno modificando, che è uno schema organizzativo decente. Riduce anche la necessaria ripetizione dei selettori, che è una buona cosa.
Purtroppo, a mio parere, questi benefici sono superati dal fatto che questo produce un codice disordinato. Questo problema si presenta chiaramente come il codice diventa più complesso. Qui abbiamo due diversi elementi, ognuno dei quali sfrutta la funzione di query multimediale nidificata.
Il Sass sopra compilerà il CSS qui sotto. Come puoi vedere, ogni media query è scritta singolarmente e appare subito dopo gli stili a cui è associata.
Se hai lavorato con il responsive design, probabilmente avrai subito qualche problema con il modo in cui questo codice è stato compilato. Per vedere cosa intendo, diamo un'occhiata a come potrei codificarlo a mano in puro CSS se lo facessi manualmente.
Chiamami pazzo, ma penso che questo sia superiore a ciò che Sass sta sputando. Ho un vero problema con il fatto che non sono combinate dichiarazioni di query sui media identiche. Vediamo qui che non c'era motivo di scrivere la query 300px due volte quando potevamo semplicemente scriverlo una volta e inserire entrambi i blocchi di dichiarazione all'interno.
Inoltre, l'organizzazione qui è più pulita e più facile da seguire. In genere, quando lavori con le query sui media, sei pronto per un sacco di modifiche. Con il modo Sass, sei costretto a dare la caccia attraverso il tuo codice e trovare ogni pezzo che ha bisogno di essere cambiato. Se il tuo file SCSS contiene centinaia di righe di codice, questo potrebbe essere brutale. Con il vanilla CSS, possiamo mettere tutte le nostre query multimediali in un posto e modificarle insieme come un'unità.
Direttive di controllo
Anche se non sono particolarmente entusiasta di nessuno dei risultati che ho ricevuto mescolando Sass con le query sui media, un'area che ritengo meriti di essere esplorata sono le direttive di controllo. Questo è un argomento delicato perché, se non sei un programmatore, le direttive di controllo sembrano troppo complesse per i CSS. Tienilo a mente prima di lasciarmi un brutto commento che sto solo giocando con alcune possibilità qui.
Data la natura delle query sui media, penso che le direttive di controllo possano contenere alcune funzionalità interessanti. Dopo tutto, una stessa query multimediale è molto simile a un'istruzione if: se viewport = x, fai y. Usando qualche stravagante Sass, possiamo fare molto di più. Vedi se riesci a capire cosa sta succedendo qui.
Fondamentalmente, ho impostato un articolo con una larghezza che riduce la sua larghezza di 100px per ogni media query. Poi ho impostato un mixin che cambia il colore dell'elemento se la sua larghezza scende sotto un certo punto.
Questa tecnica potrebbe essere utile per molte cose diverse, come cambiare un font di script in qualcosa di standard quando la dimensione diventa troppo piccola. Ecco una versione leggermente modificata che guarda finché l'oggetto non è largo meno di 400 px e quindi imposta l'altezza a metà della larghezza.
Ecco come si compila. Come puoi vedere, l'altezza non è stata modificata sulla prima query multimediale poiché la larghezza non è inferiore a 400 px. Nella seconda query multimediale, la larghezza è 300 px, quindi l'altezza è stata modificata in 150 px. Il bello di questo è che il codice compilato è conciso e non ha nessuna delle folle logiche dall'alto.
Conclusione
Mi sarebbe piaciuto molto aver presentato una discussione su come Sass sia un punto di svolta nel gioco quando si tratta di domande sui media, ma in questo momento penso che sia vero il contrario. Probabilmente è meglio evitare qualsiasi cosa tranne le funzionalità di base di Sass nell'implementazione delle query multimediali. Sentiti libero di usare variabili e mixin come sempre (accetta nella dichiarazione di breakpoint), ma fai attenzione che l'ereditarietà funzioni in modo diverso da quanto ti aspetti e pensi due volte prima di fare il nesting di una query multimediale perché a lungo termine probabilmente stai creando più lavoro per te stesso .
Un'eccezione a cui posso pensare sono le direttive di controllo, che sono abbastanza avanzate e contengono alcune possibilità affascinanti se combinate con le domande dei media.
Hai provato a implementare Sass in combinazione con le query multimediali? Hai scoperto qualche trucco interessante o hai deciso di evitare del tutto la pratica? Fateci sapere nei commenti.