Share
Di tanto in tanto giochi con Sass. Stai iniziando a divertirti dato che soddisfa la maggior parte delle tue esigenze. Ma c'è questa cosa che non capisci completamente: interpolazione - inserire valori in altri valori. Bene, sei fortunato, perché oggi farò luce sull'argomento.
interpolazione, spesso indicato come interpolazione variabile o sostituzione variabile non è qualcosa di unico per Sass. In realtà, lo puoi trovare in molte lingue (PHP, Perl, Ruby, Tcl, Groovy, Unix shells ...). Parliamo spesso di interpolando una variabile o interpolando un'espressione. Per dirla in modo conciso, l'interpolazione è il processo di valutazione di un'espressione o di una stringa che contiene una o più variabili, producendo un risultato in cui le variabili vengono sostituite con i corrispondenti valori in memoria.
Hm.
Diamo invece un'occhiata ad un esempio. Se hai qualche conoscenza di base di PHP, questo potrebbe essere più facile da capire. Diciamo che vuoi echo una stringa che contiene una variabile. Il modo comune è di fare questo:
$ description = "awesome"; echo "Tuts + è". $ descrizione. "!";
Questa non è interpolazione. Questo è stringa di concatenazione. Fondamentalmente stiamo concatenando (concatenando insieme) tre stringhe: "Tuts + è","eccezionale" (indicato come $ descrizione) e "!". Ora, potremmo usare l'interpolazione piuttosto che la concatenazione di stringhe:
$ description = "awesome"; echo "Tuts + è $ description!";
Le parentesi attorno alla variabile indicano a PHP di stampare il valore della variabile all'interno della stringa. Si noti che ha bisogno di virgolette per funzionare in PHP (che è vero per la maggior parte delle lingue).
Ad ogni modo, questa è interpolazione variabile / espressione. A prescindere dal fatto che tu usi la concatenazione o l'interpolazione a questo punto, ma diciamo che l'interpolazione è zucchero sintattico per la concatenazione delle stringhe.
Dolce. Diamo un'occhiata a come funziona la sostituzione delle variabili in Sass.
I nomi delle variabili di Sass, proprio come in PHP, sono preceduti dal simbolo del dollaro ($). Qui finisce il confronto, perché quando si parla di interpolazione, Sass e PHP si comportano diversamente. C'è una buona ragione per questo: Sass è costruito in Ruby, che usa # per sostituzione di espressioni.
In Sass, dovresti fare quanto segue:
$ description: "fantastico"; @warn "Tuts + è # $ description!";
Si noti che il $ il segno non viene sottratto dal nome della variabile come in PHP. La variabile è semplicemente incapsulata in # . Vale anche la pena notare che è possibile interpolare qualsiasi tipo di variabile, non solo stringhe. Per esempio:
$ risposta: 42; @ warn "La risposta alla domanda finale di vita, l'universo e tutto è # $ answer.";
Ora che sei consapevole di quale sia l'interpolazione variabile e come farlo in Sass, è il momento di passare ai casi d'uso reali. Per il primo, riutilizzeremo ciò che abbiamo appena fatto con il @avvisare direttiva, che stampa il contenuto sulla console.
Diciamo che hai una mappa di colori chiamata $ colori (una mappa è una variabile che memorizza un mix di coppie chiave / valore) ma sei stanco di digitare map-get ($ colors, ...) più e più volte, quindi costruisci un po ' colore() funzione che preleva il colore mappato a qualunque chiave sia passata. Scriviamo insieme le basi:
Accentsconagua
// _config.scss $ colors: ("primary": tomato, "secondary": hotpink); // _function.scss @function color ($ key) @return map-get ($ colors, $ key); // _component.scss .el background-color: color (primary); Quindi è carino, vero? Ora vorresti avvertirti che la chiave non esiste se fai un refuso o stai cercando di recuperare una chiave sconosciuta dalla mappa (a proposito, potresti leggere questa introduzione alla gestione degli errori in Sass.) Questo è fatto attraverso il @avvisare direttiva, nel colore() funzione.
@function color ($ key) @if non map-has-key ($ colors, $ key) @warn "Chiave non trovata."; @return map-get ($ colors, $ key);
Non male. Ora, cosa succede se si desidera identificare quale chiave non è stata trovata?
@function color ($ key) @if non map-has-key ($ colors, $ key) @warn "Key '# $ key' non trovato."; @return map-get ($ colors, $ key);
Boom, interpolazione variabile. chiamata colore (suggestione) getterà il seguente messaggio nella console:
Chiave
grandiositànon trovato.
È bello, ma non sappiamo veramente quale sia il contesto. Per aiutare i nostri sé futuri, potremmo aggiungere il nome della mappa all'interno del messaggio di errore.
@function color ($ key) @if non map-has-key ($ colors, $ key) @warn "Key" # $ key "non trovato nella mappa di $ colors."; @return map-get ($ colors, $ key);
In questo caso, dal momento che il $ colori la variabile non è stata interpolata, verrà stampata come una stringa.
Chiave
grandiositànon trovato in $ colors map.
Finora, abbiamo visto il caso più comune per la sostituzione di variabili: stampare il contenuto di una variabile in una stringa. Questo è un ottimo esempio, ma mi è venuto in mente che c'è un caso ancora migliore per questo: variabili nelle funzioni CSS, per esempio Calc ().
Diciamo che vuoi ridimensionare il tuo contenitore principale in base alla larghezza della barra laterale. Essendo uno sviluppatore front-end coscienzioso, hai memorizzato questa larghezza in una variabile, così puoi farlo:
$ sidebar-width: 250px; .main width: calc (100% - $ sidebar-width);
E poi sorpresa! Non funziona. Non c'è nessun errore Sass, ma il tuo contenitore non è dimensionato correttamente. Se vai a ispezionare i suoi stili con DevTools, vedrai questo - barrato perché non è valido:
.main width: calc (100% - $ sidebar-width);
Ora pensiamoci: Calc () è una funzione CSS, non una funzione Sass. Ciò significa che Sass interpreta l'intera espressione come una stringa. Puoi provarlo:
$ tipo-di-espressione: tipo-di (calc (100% - $ sidebar-width)); // stringa
Poiché si tratta di una stringa, Sass non ha alcun motivo per comportarsi in modo diverso rispetto a prima $ colori nel nostro@avvisare stringa. $ Sidebar-width è considerato una stringa normale, quindi viene stampato così com'è. Ma non è quello che vuoi, vero? Quindi cerchiamo di interpolarlo!
.main width: calc (100% - # $ sidebar-width);
Ora, quando Sass compila il foglio di stile, verrà sostituito # $ Sidebar-width con il valore associato a$ Sidebar-width, in questo caso 250px, risultante nella seguente espressione CSS valida:
.main width: calc (100% - 250px);
Missione compiuta! Abbiamo parlato di Calc () qui ma è la stessa cosa con url (), lineare-gradiente (),radiale gradiente (), cubi-Bezier () e qualsiasi altra funzione nativa CSS, incluse tutte le pseudo-classi.
Ecco un altro esempio utilizzando le funzioni CSS:
@for $ i da 1 a $ max .el: nth-of-type (# $ i) // ...
Questo è un caso che tu abbia mai incontrato: usare a per loop in collaborazione con : Ennesima - * () selettori. Ancora una volta, è necessario interpolare la variabile in modo che venga stampata nel CSS di output.
Per riassumere: Sass tratta le funzioni CSS come stringhe, richiedendo così di sfuggire a qualsiasi variabile utilizzata al loro interno per stampare il loro valore nel CSS risultante.
Passiamo ad un altro caso interessante per l'interpolazione variabile: le direttive CSS, come @supporto, @pagina ma soprattutto @media.
Ora, questo ha a che fare con il modo in cui Sass analizza le direttive CSS-direct, in particolare la direttiva media. Ho sniffato il codice Sass e mentre il mio Ruby non è poi così bello, sono riuscito a trovare qualcosa di interessante:
def query_expr interp = interpolation return interp se interp return unless tok (/ \ (/) res = ['('] ss res << sass_script(:parse) if tok(/:/) res << ': ' ss res << sass_script(:parse) end res << tok!(/\)/) ss res end In sostanza, le prime righe indicano a Sass di restituire la query multimediale se esiste un'espressione interpolata o un errore a meno che non trovi una parentesi aperta ((), nel qual caso dovrebbe andare avanti e analizzare il tutto. Proviamo un esempio qui:
$ valore: schermo; @media $ value // ...
Non sorprende che questo fallisca:
CSS non valido dopo "@media": la query media prevista (ad esempio stampa, schermata, stampa e schermata) era "$ value "
Come indicato dal messaggio di errore, è in attesa di una query multimediale. A questo punto, devi interpolare la tua variabile se arriva subito dopo @media stringa. Per esempio:
$ valore: schermo; @media # valore $ // ...
Come abbiamo dedotto dalla scappatella di Ruby in precedenza, se @media è seguito direttamente da parentesi graffe (()), non devi più interpolare la variabile perché Sass valuterà qualsiasi cosa all'interno di queste parentesi. Per esempio:
$ valore: 1336px; @media (larghezza massima: valore $) // ...
In questo caso, Sass valuta l'espressione (larghezza massima: valore $), trasformandolo in (larghezza massima: 1337 px) producendo un risultato CSS valido, quindi non è necessario sfuggire alla variabile.
Quanto a perché I manutentori Sass lo progettano così, ho chiesto a Nathan Weizenbaum. Ecco la sua risposta:
In generale, non ci piace consentire le variabili grezze in luoghi in cui non è possibile utilizzare espressioni SassScript complete. Le query multimediali sono un posto del genere, dato che SassScript può essere ambiguo lì (specialmente le mappe).
- Nathan Weizenbaum (@ nex3) 10 giugno 2014
Ok, questo è l'ultimo esempio di un caso d'uso in cui è necessario interpolare le variabili Sass: quando si utilizza una variabile come selettore o come parte di un selettore. Anche se potrebbe non essere un caso d'uso quotidiano, non è raro fare qualcosa del genere:
$ valore: personalizzato; selettore- $ valore proprietà: valore;
Sfortunatamente, questo non funziona:
CSS non valido dopo "selector-": previsto "", era "$ value "
Questo è più o meno lo stesso motivo per l'esempio di media query. Sass ha il suo modo di analizzare un selettore CSS. Se incontra qualcosa di inaspettato, ad esempio un segno di dollaro senza escape, si blocca.
Fortunatamente, risolvere questo problema è semplice (e ora conosci la soluzione): interpola la variabile!
$ valore: personalizzato; selettore - # $ valore proprietà: valore;
Alla fine, l'interpolazione di Sass non è così semplice come potrebbe sembrare. Ci sono alcuni casi in cui devi sfuggire alle tue variabili, e altre dove non lo fai. Da lì, hai due modi di fare le cose:
Comunque, spero di averti aiutato a capire come funziona l'interpolazione variabile. Se hai qualcosa da aggiungere, assicurati di condividere i commenti.
