Share
Benvenuto in "PostCSS Deep Dive: Guida rapida". In tutti questi primi post delle nostre serie, vedremo come iniziare con PostCSS nel modo più rapido ed efficiente possibile.
In questo tutorial inizieremo con le opzioni di configurazione istantanea, così da ora puoi lavorare con PostCSS in pochi minuti. Al momento abbiamo due opzioni di configurazione istantanea: CodePen e Prepros.
Vediamo come puoi usarli entrambi per iniziare subito a giocare con PostCSS.
Se sei nuovo di zecca per PostCSS, il modo più veloce per iniziare a usarlo è tramite CodePen.
CodePen ora ha il supporto preintegrato per PostCSS, insieme ai seguenti plugin e pacchetti:
Questa selezione di plug-in offre supporto per la sintassi futura, funzionalità Sass, rimozione di commenti e possibilità di scrivere codice di trasformazione in stenografia.
Inizia andando su CodePen e creando una nuova penna. Quindi fai clic sull'icona dell'ingranaggio in alto a sinistra della finestra CSS per aprire il pannello delle impostazioni.
Dal menu a discesa etichettato Preprocessore CSS seleziona il PostCSS opzione. Puoi anche controllare il pulsante radio etichettato Autoprefixer per avere quel plugin incluso.
Dopo aver effettuato questa selezione ora dovresti vedere un piccolo pulsante nero sotto il menu a discesa etichettato Hai bisogno di un componente aggiuntivo?. Fare clic su quel pulsante e un pannello si aprirà visualizzando un elenco di @ regole. Copia e incolla uno di questi @ regole nel pannello CSS per iniziare a utilizzare il plugin PostCSS corrispondente.
Vediamo un esempio di come potremmo utilizzare i plugin PostCSS disponibili con CodePen, a partire da cssnext pacco.
Nella parte superiore del pannello CSS, aggiungi questo codice per specificare che desideri utilizzare cssnext:
@use cssnext;
Con questa linea in atto, ora avrai la possibilità di utilizzare tutte le funzionalità descritte su http://cssnext.io/features. Utilizzeremo la variabile CSS e le funzioni colore per impostare un colore sullo sfondo del corpo.
Per prima cosa, impostiamo a :radice sezione e definire una variabile CSS in esso. Aggiungi questo al tuo pannello CSS:
: root --body_bg_color: black;
Ora possiamo usare quella variabile nel nostro CSS aggiungendo questo codice qui sotto:
body background: var (- body_bg_color);
A questo punto dovresti aver appena visto lo sfondo della tua penna diventare nero. Puoi anche fare clic sul Visualizza compilata pulsante nella parte superiore del pannello CSS per vedere il codice che è stato generato:
"Visualizza compilato" che mostra il codice dopo l'elaborazione con PostCSSOra diciamo che troviamo un po 'nero duro per un design su cui stiamo lavorando e vogliamo alleggerirlo un po'. Per regolare il colore possiamo usare il sintassi futura che consente la modifica del colore.
Sulla linea che dichiara il --body_bg_color variabile, cambia il valore da nero a:
--body_bg_color: color (leggerezza nera (20%));
Questa funzione colore schiarisce il colore nero del 20%. Ora dovresti vedere lo sfondo della tua penna è diventato grigio scuro.
Tutti i plugin supportati possono essere utilizzati su CodePen allo stesso modo:
Accentsconagua
@ regola per il plugin che si desidera utilizzareEcco la demo (visivamente insignificante) che abbiamo appena realizzato:
Prepros potrebbe non avere la gamma di supporto per plugin che ha CodePen, ma include l'attivazione completa di entrambi Autoprefixer e cssnext. Prepros può essere scaricato da https://prepros.io.
Per iniziare, trascina e rilascia un progetto che include un file CSS nell'interfaccia. Quindi fare clic sul nome del file CSS per aprire un pannello di impostazioni sul lato destro. Da qui, puoi controllare le caselle etichettate AutoPrefix CSS per abilitare Autoprefixer, e Abilita Cssnext per poter usare cssnext:
Ora potrai utilizzare tutte le funzionalità del pacchetto di plugin cssnext e avere il tuo CSS autoprefixed.
Va bene, riassumiamo rapidamente ciò che abbiamo spiegato sopra:
@ regole per abilitare plugin specificiCodePen e Prepros sono due ottimi modi per essere subito operativi con PostCSS. Tuttavia, il lato negativo è che non si arriva a decidere quali plugin utilizzare.
Quando sei pronto per sfruttare tutta la potenza di PostCSS, dovrai scegliere e configurare la tua selezione di plug-in. Probabilmente il modo più semplice per farlo è attraverso la creazione di progetti PostCSS personalizzati tramite task runner come Gulp o Grunt.
Scoprirai come farlo nei prossimi due tutorial, "Guida rapida: configurazione Gulp" e "Guida rapida: installazione Grunt".
