Share
In questo tutorial, ti guiderò attraverso uno strumento chiamato Myth. Il mito è un preprocessore CSS alternativo che, a differenza di Sass o LESS, non usa la sintassi proprietaria. Invece, Myth adotta la sintassi CSS "futura" come specificato nella Bozza di lavoro. Pensa a Myth come Picture Fill che ci consente di utilizzare HTML5
"CSS come è stato immaginato.
Prima di poter usare il Mito, dobbiamo prima impostare un paio di cose. Iniziamo!
Myth è un pacchetto Node.js che consente di lavorare su piattaforme diverse. Dovrai quindi assicurarti di avere Node.js e NPM (Node Package Manager) installati nel tuo sistema. Per verificare, avviare Terminale o Prompt dei comandi e digitare nodo -v && npm -v, come segue:
Questo indica che abbiamo Node.js e NPM installati.Questo comando dovrebbe restituire la versione di Node.js e NPM come mostrato sopra, altrimenti dovrai installarli prima di procedere ulteriormente. NPM ha fornito un breve screencast per guidarti attraverso il processo. Puoi anche seguire le serie e i corsi precedenti per scoprire in che cosa consiste Node.js.
Ora, supponendo che tu abbia Node.js e NPM impostati, puoi iniziare a installare Myth usando il seguente comando:
npm installazione -g mito
Il -g il parametro che abbiamo aggiunto installerà la libreria di Mito globalmente, che consente a Myth di essere accessibile ovunque, all'interno di qualsiasi directory sul nostro sistema.
Una volta fatto, avrai accesso a mito comando. In esecuzione mito --versione, per esempio, ti mostrerà la versione corrente di Myth installata sul tuo sistema.
Il 
Accentsconagua
mito il comando funziona.Il mito funziona con qualsiasi estensione di file basata su testo. I fogli di stile possono essere impostati in .testo, .css, o anche .mito. Qui io uso semplicemente .css quindi non dovrò configurare il mio editor di codice per rendere il codice con i colori di evidenziazione della sintassi corretti.
Esegui il seguente comando, myth --watch build / app.css app.css per monitorare le modifiche all'interno del foglio di stile in /costruire cartella e compilarlo in un file corrispondente.
Il foglio di stile verrà compilato in app.css nella directory principale.Siamo tutti pronti per usare il mito!
Il mito è essenzialmente un preprocessore CSS che ci consente di scrivere una nuova sintassi CSS (che potremmo aspettarci di essere standardizzati in futuro) compilandola nel formato CSS compatibile con il browser di oggi. Il supporto del mito include l'uso di variabili CSS, manipolazione dei colori CSS e un paio di tecniche CSS che, al momento, sono parzialmente o non sono supportate in modo uniforme come :: segnaposto pseudo-classe e Calc ().
L'uso di variabili ci aiuta in modo significativo a mantenere i fogli di stile ed è probabilmente la ragione principale per cui i preprocessori CSS sono stati così ben adottati in primo luogo. Tuttavia, le variabili arriveranno al CSS come caratteristica nativa. Secondo l'ultima bozza di lavoro, useremmo il doppio trattino -- per definire una variabile anziché il var- prefisso come indicato in una bozza precedente:
: root / ** [versione precedente e deprecata] * / var-color-primary: # 000; var-color-secondary: #fff; / ** [ultima versione] * / --color-primary: # 000; --color-secondary: #fff;
Il :radice il selettore pseudo-classe fa riferimento all'elemento radice del documento di markup. Nel caso di HTML, questo si riferirà al elemento, in SVG sarebbe il . Poiché l'elemento radice è il livello più alto di un documento, inserendo le nostre variabili nel :radice consente loro di essere accessibili in qualsiasi regola di stile all'interno del foglio di stile. È possibile limitare l'ambito della variabile dichiarando all'interno di un selettore più specifico.
Usiamo il nuovo var () funzione per applicare una variabile in una regola di stile, ad esempio:
: root --color-primary: # 000; --color-secondary: #fff; h1, h2, h3 color: var (- color-secondary); .panel background-color: var (- color-primary); color: var (- color-secondary);
Questo esempio ci darà il seguente risultato (come potevi aspettarti):
h1, h2, h3 color: #fff; .panel background-color: # 000; colore: #fff;
I valori nelle variabili possono essere qualsiasi cosa: un colore, una stringa, una lunghezza, persino un'operazione matematica che usa il CSS Calc () funzione. I valori nella variabile possono anche essere riutilizzati o ereditati in conformità con la regola CSS CSS. Sotto, ad esempio, determiniamo il altezza della linea valore basato sulla variabile precedente.
: root --font-size-base: 16px; --line-height-base: calc (16px + 10); p font-size: var (- font-size-base); line-height: var (- line-height-base);
Questo ci dà:
p font-size: 16px; altezza della linea: 26px;
Un browser che supporta nativamente la variabile CSS attualmente è Firefox (trova l'elenco completo su CanIUse.com).
La funzione di manipolazione del colore ci dà la possibilità di cambiare i colori in modo più intuitivo; non c'è bisogno di memorizzare o manipolare il selettore di colori solo per scegliere il colore giusto. Questa è una pratica comune con i preprocessori CSS, ma colore() (parte del CSS Color mod Level 4) ci permetterà di modificare i colori in un semplice CSS. Questa nuova funzione funziona specificando il colore insieme a un cosiddetto colore regolatore:
element background-color: color ();
I regolatori di colore supportati da Myth includono:
leggerezza(), per modificare la luminosità del colore dato.bianco (), per modificare l'intensità del bianco del colore specificato.nero (), simile a bianco (), tranne che modifica l'intensità del nero.saturazione(), per modificare la saturazione del coloretinta() , per produrre un colore più chiaro mescolando il colore indicato con il bianco.ombra () , per produrre un colore più scuro mescolando il colore indicato con il nero.L'esempio seguente si alleggerirà #ccc (grigio scuro) del 20%.
p color: color (#ccc lightness (20%));
... che compila in:
p color: rgb (51, 51, 51);
In alternativa, puoi anche passare il colore attraverso una variabile, in questo modo, che ci darà lo stesso risultato:
: root --color-primary: #ccc; p color: color (var (- color-primary) lightness (20%));
colore() è una funzione che sarà molto utile se utilizzata in combinazione con il CSS3 lineare gradiente per determinare i colori del gradiente, ad esempio:
.pulsante background: gradiente lineare (in basso, var (- color-primary), colore (var (- color-primary) shade (10%))); ;
Il font-variant la proprietà è un'altra cosa che possiamo usare in Myth. font-variant è stato effettivamente presente nei CSS dal CSS1 con solo due valori accettati, normale e maiuscoletto. In CSS3, parte del CSS Fonts Module, il font-variant la proprietà è stata estesa con valori più accettati e aggiunte di proprietà specifiche come font-variant-est-asiatico questo ci permetterà di selezionare le variazioni dei glifi cinesi, semplificato o tradizionale.
Proviamo a trasformare tutte le lettere all'interno di un'intestazione in maiuscole:
h1 font-variant: all-small-caps;
Il mito compilerà questo codice in:
p -webkit-font-feature-settings: "smcp", "c2sc"; -moz-font-feature-settings: "smcp", "c2sc"; font-feature-settings: "smcp", "c2sc"; font-variant: all-small-caps;
Il all-small-caps valore costringerà tutti i caratteri, anche minuscoli e maiuscoli, in maiuscole. Tuttavia, tieni presente che all-small-caps avrà effetto solo in particolari famiglie di font che forniscono versioni a piccolo maiuscolo di ciascun glifo, come Helvetica, Arial e Lucida Grande. Se i maiuscoletti non sono supportati, il glifo restituirà "sconosciuto":
Immagine di cortesia: Typography.comFirefox è, al momento, l'unico browser con un supporto decente per il font-variant proprietà. Molti dei valori, tranne il maiuscoletto (presente da CSS1) non funzionerà con altri browser, tra cui Chrome e Safari. (vedi l'elenco completo di compatibilità in CanIUse.com).
Mito include anche Autoprefixer che consente di inserire prefissi del browser per particolari proprietà. Vai al repository Github per trovare altre funzionalità CSS che supporta. C'è anche un plugin per Grunt e Gulp per soddisfare il tuo flusso di lavoro.
Infine, Myth è un preprocessore CSS per chiunque stia vivendo al margine del web. Ma, indipendentemente dal fatto che tu decida di utilizzare Myth come normale strumento CSS o no, possiamo concludere che dimostra una manciata di nuove eccitanti funzionalità CSS che renderanno il Web un posto molto migliore in futuro.
