Share
Negli ultimi due tutorial abbiamo esaminato i modi per utilizzare PreCSS su fogli di stile completati per migliorare la compatibilità e l'ottimizzazione del browser incrociato, essenzialmente come inviare-processore. In questo tutorial imparerai a utilizzare PostCSS come pre-processore, nello stesso modo in cui utilizzeresti Stylus, Sass o LESS.
Esistono due modi principali per utilizzare PostCSS per la pre-elaborazione. Uno è quello di selezionare tutti i propri plugin per aggiungere la funzionalità del preprocessore che si desidera, e l'altro è quello di installare un pacchetto di plugin preselezionati in modo da essere pronti ad andare subito.
Inizieremo con l'approccio più rapido e semplice, installando l'eccellente pacchetto di plug-in PreCSS, creato da Jonathan Neal. Nel tutorial successivo passeremo a come mettere insieme il tuo preprocessore, usando solo la funzionalità che desideri.
Questo tutorial presumerà che tu abbia un certo grado di familiarità con le caratteristiche che si trovano comunemente nei preprocessori come Stylus, Sass o LESS. Questo è puramente perché ci concentreremo su Come puoi utilizzare questi stessi tipi di funzionalità tramite PostCSS, piuttosto che che cosa le caratteristiche effettivamente lo fanno. Detto questo, anche se non hai mai usato un preprocessore prima, questo potrebbe essere il punto di partenza perfetto.
Vedremo come configurare un progetto Gulp o Grunt usando PreCSS nella prossima sezione, tuttavia, se vuoi prendere una scorciatoia, (solo per ora), puoi in alternativa utilizzare il campo di dimostrazione dal vivo per provare il codice ci occuperemo di questo tutorial. Il codice può essere digitato nella finestra di sinistra e verrà automaticamente compilato per te e visualizzato nella finestra di destra.
PreCSS Live Editor: https://jonathantneal.github.io/precssLa prima cosa che devi fare è impostare il tuo progetto in modo che utilizzi Gulp o Grunt, a seconda delle tue preferenze. Se non hai già una preferenza per l'uno o l'altro, ti consiglio di utilizzare Gulp in quanto avrai bisogno di meno codice per raggiungere gli stessi fini.
Puoi leggere come configurare i progetti Gulp o Grunt per PostCSS nelle esercitazioni precedenti
rispettivamente.
Se non si desidera configurare manualmente il progetto da zero, è possibile scaricare i file sorgente allegati a questo tutorial ed estrarre il progetto di avviamento Gulp o Grunt in una cartella di progetto vuota.
Quindi, con un terminale o un prompt dei comandi puntato sulla cartella, eseguire il comandoinstallazione di npm.
Sia che tu stia usando Gulp o Grunt, installa PreCSS nel tuo progetto con il comando:
npm installa precss --save-dev
Se stai usando Gulp, aggiungi questa variabile sotto le variabili già presenti nel file:
Accentsconagua
var precss = require ('precss');Ora aggiungi il nuovo nome della variabile nel tuo processori array:
var processors = [precss];
Fai un rapido test per verificare che tutto funzioni eseguendo il comando gulp css quindi controlla che un nuovo file "style.css" sia apparso nella cartella "dest" del tuo progetto.
Se stai usando Grunt, aggiorna il processori oggetto, che è annidato sotto il opzioni oggetto, al seguente:
processori: [require ('precss') ()]Fai un rapido test per verificare che tutto funzioni eseguendo il comando grunt postcss quindi controlla che un nuovo file "style.css" sia apparso nella cartella "dest" del tuo progetto.
Ora hai tutto ciò che ti serve per utilizzare PreCSS installato e pronto all'uso. Ciò significa che siamo pronti per iniziare a passare attraverso alcune delle funzionalità di pre-elaborazione di PreCSS e come possono essere utilizzate.
In generale, la sintassi PreCSS è più simile a quella di Sass. Tuttavia usa alcuni dei suoi approcci unici, che copriremo mentre procediamo.
Nota: a causa della sintassi simile a Sass di PreCSS, scoprirai che un evidenziatore Sass sintassi funzionerà meglio per te nel tuo editor di testo preferito.
La nidificazione è qualcosa di comune a tutti e tre i principali preprocessori, ovvero Stylus, Sass e LESS, ed è presente anche in PreCSS. L'annidamento in PreCSS viene eseguito nello stesso modo in Sass e LESS, posizionando i selettori all'interno delle parentesi graffe degli altri selettori.
La possibilità di usare il & il simbolo per fare in modo che il selettore genitore duplicato nel selettore figlio funzioni allo stesso modo in PreCSS come in altri preprocessori.
Prova ad aggiungere il seguente codice annidato al tuo file "src / style.css":
.menu larghezza: 100%; a decorazione del testo: nessuna; & :: before content: ";
Compila il tuo CSS con gulp css o grunt postcss e il tuo file "dest / style.css" avrebbe dovuto valutare il codice annidato nel seguente modo:
.menu larghezza: 100%; .menu a text-decoration: none; .menu :: before content: ";
Le variabili sono un altro tipo di funzionalità comune a tutti i preprocessori e sono incluse in PreCSS. L'unica cosa in genere diversa tra ogni preprocessore è la sintassi per indicare le variabili.
@ simbolo e posto a : prima del valore. $ simbolo e posto a = firmare prima del valore. $ simbolo e posto a : prima del valore.In linea con la tendenza PreCSS ad usare la sintassi di Sass come, pone anche a $ prima del nome della variabile e a : prima del valore.
Prova a utilizzare le variabili PreCSS aggiungendo questo al tuo file "src / style.css":
$ text_color: # 232323; body color: $ text_color;
Dopo aver ricompilato dovresti vedere questo codice risultante:
body color: # 232323;
Condizionali, cioè. Se e altro logica, sono una caratteristica molto forte sia in Sass che in Stylus. MENO offre mixin guardati, ma non offrono lo stesso grado di potenza. Le condizionali sono presenti in PreCSS e seguono la stessa sintassi di Sass, usando @Se e @altro.
Aggiungi questo codice di esempio al tuo file "src / style.css":
$ column_layout: 2; .column @if $ column_layout == 2 width: 50%; fluttuare: a sinistra; @else width: 100%;
Nell'esempio sopra abbiamo a .colonna l'output della classe differisce a seconda se vogliamo un layout a una colonna o un layout a due colonne. Abbiamo il $ column_layout variabile impostata su 2, il che significa che dovremmo vedere larghezza: 50%; fluttuare: a sinistra; uscita nella nostra classe.
Compila il tuo file, e dovresti vedere quanto segue nel tuo file "dest / style.css".
.colonna larghezza: 50%; float: sinistra
Nota: il plugin postcss-advanced-variables che fornisce questa funzionalità di conditionals è ancora abbastanza nuovo, e ho riscontrato un output inaspettato quando lo si utilizzava per condizionali più complessi, tuttavia, sono sicuro che verrà aggiornato nel prossimo futuro.
Esiste un plug-in alternativo che può essere utilizzato per i condizionali denominati postcss-conditionals. Vedremo come puoi utilizzare quel plugin (se lo desideri) nel prossimo tutorial, "Rolling Your Own Preprocessor".
@per e @ogni Ci sono due tipi di loop disponibili in PreCSS, il @per e @ogni loop. Entrambi usano un approccio simile a Sass. I cicli "For" consentono di scorrere un contatore numerico, mentre i cicli "ciascuno" consentono di scorrere un elenco di elementi.
@per LoopsIn un @per loop c'è una variabile "contatore" che tiene traccia di dove sei in bicicletta attraverso il tuo contatore numerico, tipicamente impostato come $ i. Ad esempio, durante l'iterazione da 1 a 3 ci saranno tre cicli; nel primo $ i sarà uguale 1, il secondo sarà uguale 2 e il terzo sarà uguale 3.
Questo $ i la variabile contatore può essere interpolata in selettori e regole, che possono essere molto utili per cose come la generazione nth-of-type () regole e calcolo delle larghezze.
Aggiungi questo codice al tuo file "src / style.css" per provare a @per ciclo continuo:
@for $ i da 1 a 3 p: nth-of-type ($ i) margin-left: calc (100% / $ i);
Dopo la compilazione dovresti vedere questo codice esteso a:
p: nth-of-type (1) margin-left: calc (100% / 1); p: nth-of-type (2) margin-left: calc (100% / 2); p: nth-of-type (3) margin-left: calc (100% / 3);
Nota: numeri 1, 2 e 3 sono stati inseriti in ciascuno degli stili di cui sopra.
@ogni LoopsUn @ogni il ciclo scorre un elenco di elementi anziché numeri. Come con @per loop, la variabile che rappresenta l'oggetto corrente del loop può essere interpolata in selettori e regole. Si noti che per interpolare in una stringa, è necessario inserire una serie di parentesi nel nome della variabile nel formato $ (Var).
Dare usando PreCSS @ogni esegue un ciclo aggiungendo il seguente codice di esempio:
$ social: twitter, facebook, youtube; @each $ icon in ($ social) .icon - $ (icon) background: url ('img / $ (icon) .png'); Dopo la compilazione dovresti vedere il seguente CSS è stato generato:
.icona-twitter background: url ('img / twitter.png'); .icon-facebook background: url ('img / facebook.png'); .icon-youtube background: url ('img / youtube.png'); La sintassi per la creazione di mixin è un aspetto di PreCSS che è leggermente diverso da Sass.
In Sass, per definire un mixin usi la sintassi @mixin mixin_name ($ arg1, $ arg2) ... e quindi usarlo con @include mixin_name (pass_arg1, pass_arg2);.
In PreCSS, d'altra parte, si definisce un mixin con la sintassi @ define-mixin nome_macro $ arg1, $ arg2 ... e usalo con @mixin mixin_name pass_arg1, pass_arg2;.
Aggiungi questo esempio al tuo file "src / style.css":
@ define-mixin icon $ network, $ color .button. $ (network) background-image: url ('img / $ (network) .png'); colore di sfondo: $ colore; @mixin icon twitter, blue; @mixin icon youtube, red;Nella compilation dovresti vedere:
.button.twitter background-image: url ('img / twitter.png'); colore di sfondo: blu; .button.youtube background-image: url ('img / youtube.png'); colore di sfondo: rosso; Nota: gli argomenti passati attraverso il mixin possono essere interpolati in selettori e stringhe con lo stesso approccio di citato in @ogni cappi sopra; con il formato $ (Var).
Oltre a utilizzare i mixin nel modo mostrato sopra, possono anche essere impostati per consumare blocchi di contenuti passati quando si chiama il mixin. Questo è essenzialmente lo stesso processo di Sass ' @soddisfare.
Ad esempio, modifica il mixin dell'esempio precedente, posizionando @ Mixin-content dove vuoi che appaia un blocco di contenuti passato, in questo modo:
@ define-mixin icon $ network, $ color .button. $ (network) background-image: url ('img / $ (network) .png'); colore di sfondo: $ colore; @ Mixin-content; Quando un mixin che incorpora @ Mixin-content è usato, deve essere posizionato con parentesi graffe, piuttosto che su una singola riga che termina con a ;, o non riuscirà a compilare.
Aggiorna il tuo codice in modo che le tue chiamate di mixino siano così:
@mixin icon twitter, blue width: 3rem; @mixin icon youtube, red width: 4rem;
Dopo la compilazione, questo dovrebbe fornire il seguente codice: notare l'inclusione di larghezza contenuto passato attraverso ogni uso del mixin:
.button.twitter background-image: url ('img / twitter.png'); colore di sfondo: blu; larghezza: 3rem; .button.youtube background-image: url ('img / youtube.png'); colore di sfondo: rosso; larghezza: 4rem; Le estensioni sono simili ai mixin in un certo senso, in quanto sono progettate per consentire il riutilizzo di blocchi di codice. Tuttavia, l'idea alla base di "estende" è quella di creare un set base di codice che sai che userai nello stesso modo più volte per un certo tipo di elemento. È quindi possibile estendere successivamente su quella base con un codice aggiuntivo non predefinito.
In PreCSS, la sintassi per definire un'estensione è @ define-extend nome_estensione ....
Nel tuo file "src / style.css", definisci un'estensione contenente gli stili di base per un pulsante arrotondato in questo modo:
@ define-extend rounded_button border-radius: 0.5rem; imbottitura: 1em; border-width: 0.0625rem; border-style: solido;
Questo set predefinito di stili è ora pronto per essere esteso con un codice aggiuntivo, ad esempio, impostando cose come colore di sfondo e colore del bordo. Questo viene fatto usando la sintassi @extend extend_name; per importare gli stili di base definiti nell'estensione.
Aggiungi questo codice di esempio, sotto il codice che hai appena aggiunto:
.blue_button @extend rounded_button; border-color: # 2F74D1; background-color: # 3B8EFF; .red_button @extend rounded_button; border-color: # C41A1E; background-color: # FF2025;
Dove il @extend rounded_button; linea viene utilizzata, verrà inserito l'intero contenuto dell'estensione.
Compila i tuoi stili e dovresti ottenere:
.blue_button, .red_button border-radius: 0.5rem; imbottitura: 1em; border-width: 0.0625rem; border-style: solido; .blue_button border-color: # 2F74D1; background-color: # 3B8EFF; .red_button border-color: # C41A1E; background-color: # FF2025;
Nota anche che gli stili comuni a .blue_button e .red_button la classe è stata combinata per l'efficienza.
Il plugin utilizzato per l'inlining dei fogli di stile tramite @importare è lo stesso di cui abbiamo parlato nel precedente tutorial di questa serie: Minification and Optimization. Per una carrellata su come funziona, dirigiti e leggi la sezione "In linea / Combina file con @import".
Nel contesto dell'utilizzo di PostCSS come preprocessore, le importazioni diventano ancora più utili in quanto offrono la possibilità di configurare partial, a cui potresti essere abituato da altre soluzioni di pre-elaborazione. Ad esempio, è possibile impostare una cartella "parziali", separare il progetto in file parziali logicamente discreti e quindi importarli in questo modo:
@import "partials / _variables.css"; @import "partials / _utilities.css"; @import "partials / _mixins.css"; @import "partial / _extends.css";
Spero che ora abbiate alcune informazioni su quanto PostCSS possa essere potente come preprocessore tramite il pacchetto PreCSS. Per riassumere ciò che abbiamo visto sopra:
@ define-mixin nome_macro $ arg1, $ arg2 ... @mixin mixin_name pass_arg1, pass_arg2; @ Mixin-content può essere usato allo stesso modo di Sass ' @soddisfare @ define-extend nome_estensione ...@extend extend_name;@importare inline file CSS esterni, particolarmente utili per l'uso di partialPreCSS è un progetto fantastico, che riunisce alcuni eccellenti plug-in di estensione del linguaggio e rende la pre-elaborazione basata su PostCSS praticamente plug and play. Fornisce quasi tutte le funzionalità che la maggior parte degli utenti del preprocessore si aspettano, ed è un modo rapido e senza problemi per far rotolare il preprocessore PostCSS.
L'utilizzo di PreCSS è uno dei due metodi di preprocessing PostCSS di cui abbiamo parlato all'inizio di questo tutorial. L'altro metodo è impostare il tuo proprio preprocessore, seleziona a mano i plug-in di estensione del linguaggio che si adattano ai tuoi progetti o allo stile di codifica. Il trade off è un po 'più di setup, ma in cambio hai la libertà di mettere insieme un preprocessore che funziona comunque tu lo vuoi.
Imparerai come farlo nel prossimo tutorial, "Roll Your Own Preprocessor".
