C’è un modo per impostare variabili globali in css come:
@Color1 = #fff; @Color2 = #b00; h1 { color:@Color1; background:@Color2; }
Ultimo aggiornamento: 03/04/2018
Necessario il preprocessore “NOT” !
C’è molta ripetizione nei CSS. Un singolo colore può essere utilizzato in più punti.
Per alcune dichiarazioni CSS, è ansible dichiararlo più in alto nella cascata e lasciare che l’ereditarietà CSS risolva questo problema in modo naturale.
Per progetti non banali, questo non è sempre ansible. Dichiarando una variabile sullo pseudo-elemento :root
, un autore CSS può fermare alcune istanze di ripetizione usando la variabile.
Imposta la tua variabile nella parte superiore del tuo foglio di stile:
CSS
Crea una class radice:
:root { }
Crea variabili (- [String] : [valore] )
:root { --red: #b00; --blue: #00b; --fullwidth: 100%; }
Imposta le tue variabili ovunque nel tuo documento CSS:
h1 { color: var(--red); } #MyText { color: var(--blue); width: var(--fullwidth); }
Vedi caniuse.com per la compatibilità attuale.
FIREFOX: versione 31 + (abilitata per impostazione predefinita)
( Sempre come al solito.) Ulteriori informazioni da Mozilla
CHROME: versione 49 + (abilitata di default) .
“Questa funzione può essere abilitata nella versione 48 di Chrome per i test abilitando la funzionalità sperimentale della piattaforma Web . Inserisci chrome://flags/
nella barra degli indirizzi di Chrome per accedere a questa impostazione.”
Safari / IOS Safari: versione 9.1 / 9.3 (abilitato per impostazione predefinita) .
Opera: versione 39 + (abilitata per impostazione predefinita) .
Android: versione 52 + (abilitata per impostazione predefinita) .
IE: Non succederà mai.
Edge: versione 15 + (abilitata per impostazione predefinita) .
Proprietà personalizzate CSS sbarcate in Windows Insider Preview build 14986
W3C SPEC
Specifica completa per le prossime variabili CSS
Leggi di più
Un violino e uno snippet sono allegati sotto per il test:
(Funzionerà solo con i browser supportati).
FIDDLE DEMO
:root { --red: #b00; --blue: #4679bd; --grey: #ddd; --W200: 200px; --Lft: left; } .Bx1, .Bx2, .Bx3, .Bx4 { float: var(--Lft); width: var(--W200); height: var(--W200); margin: 10px; padding: 10px; border: 1px solid var(--red); } .Bx1 { color: var(--red); background: var(--grey); } .Bx2 { color: var(--grey); background: black; } .Bx3 { color: var(--grey); background: var(--blue); } .Bx4 { color: var(--grey); background: var(--red); }
If you see four square boxes then variables are working as expected.
I should be red text on grey background. I should be grey text on black background. I should be grey text on blue background. I should be grey text on red background.
Non è ansible creare variabili in CSS in questo momento. Se vuoi questo tipo di funzionalità dovrai usare un preprocessore CSS come SASS o LESS . Ecco i tuoi stili come apparirebbero in SASS:
$Color1:#fff; $Color2:#b00; $Color3:#050; h1 { color:$Color1; background:$Color2; }
Inoltre ti permettono di fare altre (fantastiche) cose come i selettori di nidificazione:
#some-id { color:red; &:hover { cursor:pointer; } }
Questo si compilerebbe per:
#some-id { color:red; } #some-id:hover { cursor:pointer; }
Guarda il tutorial SASS ufficiale per le istruzioni di configurazione e altro su syntax / funzionalità. Personalmente io uso un’estensione di Visual Studio chiamata Web Workbench di Mindscape per un facile sviluppo, ci sono anche molti plugin per altri IDE.
A partire da luglio / agosto 2014, Firefox ha implementato la bozza delle specifiche per le variabili CSS, ecco la syntax:
:root { --main-color: #06c; --accent-color: #006; } /* The rest of the CSS file */ #foo h1 { color: var(--main-color); }
Non è ansible usare i CSS, ma usando un preprocessore CSS come less o SASS .
Prova SASS http://sass-lang.com/ o MENO http://lesscss.org/
Adoro SASS e lo uso per tutti i miei progetti.
Lo faccio in questo modo:
L’html:
Il xCss.php:
// place here your vars $fntBtn = 'bold 14px Arial' $colBorder = '#556677' ; $colBG0 = '#dddddd' ; $colBG1 = '#44dddd' ; $colBtn = '#aadddd' ; // here goes your css after the php-close tag: ?> button { border: solid 1px = $colBorder; ?>; border-radius:4px; font: = $fntBtn; ?>; background-color:= $colBtn; ?>; }
Avrai bisogno di LESS o SASS per lo stesso ..
Ma ecco un’altra alternativa che credo funzionerà nel CSS3 ..
http://css3.bradshawenterprises.com/blog/css-variables/
Esempio :
:root { -webkit-var-beautifulColor: rgba(255,40,100, 0.8); -moz-var-beautifulColor: rgba(255,40,100, 0.8); -ms-var-beautifulColor: rgba(255,40,100, 0.8); -o-var-beautifulColor: rgba(255,40,100, 0.8); var-beautifulColor: rgba(255,40,100, 0.8); } .example1 h1 { color: -webkit-var(beautifulColor); color: -moz-var(beautifulColor); color: -ms-var(beautifulColor); color: -o-var(beautifulColor); color: var(beautifulColor); }