Finora abbiamo usato PostCSS per fare cose come l'ottimizzazione dei fogli di stile, l'aggiunta di funzionalità per la pre-elaborazione e la generazione di alcune convenzioni di denominazione delle classi, ma come può aiutare a scrivere semplicemente vecchi CSS?
Ci sono così tanti piccoli pezzetti di codice che il web designer medio digita migliaia di volte nel corso della loro carriera, e se riesci a guadagnare solo un po 'di tempo su ognuno di essi, aggiunge molto alla fine.
In questo tutorial utilizzeremo PostCSS per ridurre il tempo di digitazione dei codici di ogni giorno tramite una serie di scorciatoie e aggiunte stenografiche. Cominciamo!
Imposta il tuo progetto
Avrai già familiarità con questo processo, ma la prima cosa che devi fare è impostare il tuo progetto per utilizzare Gulp o Grunt. 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, quindi dovresti trovare un po 'più semplice lavorare con.
Puoi leggere come configurare i progetti Gulp o Grunt per PostCSS nelle esercitazioni precedenti
Guida rapida per PostCSS: Gulp Setup o
Guida rapida per PostCSS: installazione Grunt
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 verso la cartella esegui il comando installazione di npm.
Installa i plugin
Per questo tutorial installeremo diversi plugin, ognuno dei quali gestisce un diverso tipo di scorciatoia o stenografia.
Sia che tu stia utilizzando Gulp o Grunt, esegui il seguente comando all'interno della cartella del progetto per installare i plug-in che utilizzeremo:
Ora siamo pronti per caricare i plugin nel tuo progetto.
Carica i plugin via Gulp
Se stai usando Gulp, aggiungi queste variabili sotto le variabili già presenti nel file:
var alias = require ('postcss-alias'); var crip = require ('postcss-crip'); var magician = require ('postcss-font-magician'); var triangle = require ('postcss-triangle'); var circle = require ('postcss-circle'); var linkColors = require ('postcss-all-link-colors'); var center = require ('postcss-center'); var clearfix = require ('postcss-clearfix'); var position = require ('postcss-position'); var size = require ('postcss-size'); var verthorz = require ('postcss-verthorz'); var colorShort = require ('postcss-color-short');
Ora aggiungi ognuno di questi nuovi nomi di variabili nel tuo processori array:
processori var = [alias, crip, mago, triangolo, cerchio, linkColors, center, clearfix, position, size, verthorz, colorShort];
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.
Carica i plugin via Grunt
Se stai usando Grunt, aggiorna il processori oggetto, che è annidato sotto il opzioni oggetto, al seguente:
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.
Bene, ora i tuoi plugin sono tutti installati impariamo come usarli per scorciatoie CSS e abbreviazioni.
Utilizzare la scorciatoia per le proprietà
Ci sono molte proprietà che dobbiamo digitare ancora e ancora e oltre di nuovo in CSS. Certo, il tempo necessario per digitare una manciata di caratteri una volta è molto piccolo, ma in anni di sviluppo tutto sommato. Daremo un'occhiata a due plug-in che ti consentono di ridimensionare le proprietà fino alla versione abbreviata per ottenere un flusso rapido e scorrevole mentre esegui il calcolo del tuo CSS.
Definisci la tua stenografia
Il plug-in alias postcss di Sean King consente di definire la propria stenografia, o "alias", per qualsiasi proprietà che si desidera abbreviare. Questo ti dà un modo per assicurarti che la stenografia che usi sia adatta al modo in cui funziona la tua mente ed è quindi facile da ricordare.
Per definire alcuni alias aggiungere una regola at nella parte superiore del foglio di stile con la sintassi @alias .... Quindi, all'interno della configurazione at-rule, i tuoi alias aggiungendo alias-name: nome-proprietà;.
Aggiungi il seguente esempio al tuo file "src / style.css", che configurerà gli alias per il border-size, stile del bordo e colore del bordo proprietà:
Maggiori informazioni su postcss-alias su: https://github.com/seaneking/postcss-alias
Stenografia Plug 'n' Play
Se vuoi usare molte scorciatoie di proprietà, ma non vuoi passare attraverso i passaggi di definizione di ognuna di te stesso, puoi controllare il plugin postcss-crip di Johnie Hjelm che ha centinaia di abbreviazioni di proprietà pronte per il plugin e giocare.
Ad esempio, aggiungi il seguente codice al tuo file "src / style.css", che contiene una scorciatoia per il file margin-top, margin-right, margin-bottom e margin-left proprietà:
Maggiori informazioni su postcss-crip su: https://github.com/johnie/postcss-crip
E vedi l'elenco completo delle abbreviazioni di proprietà su: https://github.com/johnie/crip-css-properties
Output @ carattere-faccia in una riga
Il plugin postcss-font-magician di Jonathan Neal è molto all'altezza del suo nome. Ti permette di usare caratteri personalizzati tramite un semplice famiglia di font regola come se tu stessi usando un font standard, e il font funzionerà solo magicamente.
Aggiungi il seguente codice al tuo file "src / style.css":
body font-family: "Indie Flower";
Questo è tutto. Questo è tutto ciò che serve per utilizzare postcss-font-mago. Nessuna sintassi speciale, basta usare il nome del font come faresti con qualsiasi altro.
In questo caso, il font Indie Flower è uno che ho selezionato dalla libreria Google Fonts. Non ho aggiunto alcun file di font personalizzato al mio progetto, quindi il plugin lo vedrà e invece andrà a controllare se il mio font specificato è disponibile da Google Fonts. Quando trova che è disponibile, creerà l'appropriato @ Font-face codice completamente automatico.
Compila il tuo file quindi guarda il tuo file "dest / style.css", dove vedrai che questo codice è stato aggiunto in:
@ font-face font-family: "Indie Flower"; stile font: normale; font-weight: 400; src: local ("Indie Flower"), local (IndieFlower), url (// fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6nZ2MAKAc2x4R1uOSeegc5U.eot?#) format ("eot"), url (// font. gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6ugdm0LZdjqr5-oayXSOefg.woff2) formato ("woff2"), url (// fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6nhCUOGz7vYGh680lGh-uXM.woff) formato ("woff" );
Puoi verificare che il carattere si carichi correttamente creando un nuovo file nella cartella "dest" denominata "index.html" e aggiungendo questo codice:
Test Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium bibendum nisl. Mauris eget orci eget nisi tristique lobortis. Pellentesque rutrum id ligula quis tempus. Vivamus tempus, justo a semper volutpat, lorem justo tincidunt urna, in mattis lorem dolor condimentum diam. Ut dapibus nunc auctor felis viverra posuere. Efficacia aeneana dell'efficacia. Vivamus leo felis, semper quis rutrum eu, eleifend eu quam.
Per caricare i caratteri dovrai visualizzare questo file tramite un http: // indirizzo, piuttosto che a file:// indirizzo, quindi o caricare il file su un host web o utilizzare un'app come Prepros per creare un'anteprima dal vivo.
Dovresti vedere il font Indie Flower applicato a tutto il tuo testo, in questo modo:
Maggiori informazioni su postcss-font-magician qui: https://github.com/jonathantneal/postcss-font-magician
Crea forme CSS
Se hai mai usato il puro CSS per creare forme, saprai che può essere un ottimo modo per includere elementi come cerchi e triangoli nei tuoi progetti, ma che può anche essere piuttosto complicato. Soprattutto nel caso dei triangoli, capire quale codice è necessario per ottenere una forma orientata nella giusta direzione alla giusta dimensione può sembrare un po 'contro intuitivo.
È qui che i plugin postcss-circle e postcss-triangle di Jed Mao vengono in soccorso. Entrambi i plugin creano una sintassi semplificata e un modo intuitivo per creare cerchi e triangoli con puro CSS.
Aggiungi un cerchio
Per creare un cerchio, usa la sintassi cerchio: dimensione colore;. Aggiungi il seguente codice al tuo file "src / style.css":
.circle circle: 8rem # c00;
Compilalo e vedrai il seguente codice aggiunto al tuo file "dest / style.css":
Ora aggiungi questo codice HTML al file "dest / index.html" che hai creato nell'ultima sezione:
Dai un'occhiata al tuo file in un browser e ora dovresti vedere un cerchio rosso:
Maggiori informazioni su postcss-circle su: https://github.com/jedmao/postcss-circle
Aggiungi un triangolo
Ci sono tre tipi di triangolo che puoi aggiungere usando questo plugin; isoscele, isoscele destra ed equilatero. Ognuno di questi ha un insieme leggermente diverso di sintassi, che potete leggere completamente al repository Github del plugin.
Andremo ad aggiungere un triangolo isoscele, la cui sintassi è:
triangolo: puntamento-; larghezza: ; altezza: ; colore di sfondo: ;
Aggiungiamo questo esempio di triangolo isoscele al nostro file "src / style.css":
Per vedere il triangolo nel tuo file "dest / index.html" aggiungi questo html:
Dopo aver aggiornato questo file nel tuo browser, dovresti vedere un triangolo isoscele rosso che punta a destra:
Maggiori informazioni su postcss-triangle su: https://github.com/jedmao/postcss-triangle
Utilizzare le scorciatoie per le attività comuni
Imposta stile di collegamento
L'impostazione dei colori per i collegamenti è un lavoro che deve essere eseguito in ogni progetto e richiede l'impostazione di stili per i collegamenti predefiniti e quattro diversi stati di collegamento. Il plugin postcss-all-link-colors di Jed Mao ti consente di scorciare quel processo, emettendo i colori di tutti i tuoi link contemporaneamente.
Aggiungi quanto segue al tuo "src / style.css":
a @ link-colors all # 4D9ACC;
Quindi compila il tuo file e vedrai che sono stati impostati tutti gli stati di collegamento richiesti:
Hai anche la possibilità di generare un colore diverso per uno stato specifico. Basta aggiungere alcune parentesi graffe alla fine della regola, e al suo interno utilizzare la sintassi stato: colore;.
Aggiorna il codice che hai appena aggiunto al tuo file "src / style.css" al seguente:
a @ link-colors all # 4D9ACC hover: # 5BB8F4;
Ora quando compili vedrai lo stato di passaggio del mouse con un colore diverso dal resto degli stili:
Maggiori informazioni su postcss-all-link-colors su: https://github.com/jedmao/postcss-all-link-colors
Centra verticalmente o orizzontalmente
Centrare, verticalmente o orizzontalmente, è uno di quei compiti che è una spina perenne nella parte degli sviluppatori CSS. Il plugin postcss di Jed Mao rende l'operazione molto più semplice con l'introduzione di In alto: centro; per centraggio verticale, e a sinistra: centro; per centraggio orizzontale.
Aggiungi questo codice al tuo file "src / style.css":
Nota: il centraggio usa il posizionamento assoluto, quindi dovrai avvolgere gli elementi centrati con un genitore che usa il posizionamento relativo, assoluto o fisso. Dato che gli elementi posizionati in modo assoluto non influenzano l'altezza o la larghezza dei loro genitori, dovrai anche impostare l'altezza e la larghezza dell'elemento genitore per adattarli.
Ad esempio, aggiungi a sinistra: centro; al .cerchio classe che hai creato in precedenza in modo che sia centrata orizzontalmente:
.circle circle: 8rem # c00; a sinistra: centro;
Quindi aggiungi questa seconda classe per fungere da wrapper attorno al cerchio, dandogli un posizionamento relativo e un'altezza corrispondente al cerchio:
.circle_wrap position: relative; altezza: 8rem;
Ora aggiungi un elemento che riporta questa classe come un wrapper attorno al tuo cerchio html esistente:
Quando torni indietro e aggiorni la tua pagina, dovresti vedere che il tuo cerchio è stato centrato orizzontalmente:
Maggiori informazioni su postcss-center all'indirizzo: https://github.com/jedmao/postcss-center
Uscita Clearfix in una sola riga
In qualsiasi progetto che incorpora float, la creazione di una classe di clearfix è talmente utile che è semplicemente essenziale. Il plugin postcss-clearfix di Sean King trasforma la creazione dello stile clearfix in un lavoro a riga singola, aggiungendo fissare come un possibile valore che può essere usato con il chiaro proprietà.
Per un clearfix che funzionerà su IE8 + aggiungi quanto segue al tuo file "src / style.css":
.clearfixed clear: fix;
Alla compilazione, vedrai che ha prodotto il seguente codice di clearfix, pronto per l'uso:
.clearfixed: after content: "; display: table; clear: both;
Se hai bisogno di un clearfix che funzioni su IE6 + usa il valore fix-legacy invece di semplice fissare, così:
.clearfixed_legacy clear: fix-legacy;
Quando questo codice è compilato, vedrai che include un piccolo contenuto extra che lo rende amichevole ai browser legacy:
.clearfixed_legacy: before, .clearfixed_legacy: after content: "; display: table; .clearfixed_legacy: after clear: both; .clearfixed_legacy zoom: 1;
Maggiori informazioni su postcss-clearfix su: https://github.com/seaneking/postcss-clearfix
Imposta il posizionamento su una riga
Quando si desidera utilizzare il posizionamento non predefinito, vale a dire. assoluto, fisso o parente, devi digitare i valori per l'elemento superiore, destra, parte inferiore e sinistra posizionamento manuale. Non esiste una stenografia che potresti usare quando imposti i margini o il riempimento in una riga. Cioè, fino a quando non si installa il plugin post-posizione di Sean King.
Con questo plugin, quando si usa il posizione proprietà, dopo aver impostato un valore di assoluto / fisso / parente, puoi dichiarare superiore, destra, parte inferiore e sinistra valori nella stessa riga.
Aggiungi il seguente codice di esempio al tuo file "src / style.css":
.absolute position: absolute 1rem 1rem 0 0;
Dopo la compilazione, vedrai che la stenografia è stata compilata in linee separate che normalmente dovresti digitare manualmente.
.absolute position: absolute; inizio: 1rem; a destra: 1rem; fondo: 0; a sinistra: 0;
Il modo in cui questi valori sono dichiarati ha lo stesso schema di margine o imbottitura abbreviazione, cioè puoi anche impostare in alto e in basso il primo valore, quindi a destra e a sinistra nel secondo, oppure puoi impostare un valore da applicare a tutti e quattro.
.fixed_two_values position: fixed; inizio: 2rem; a destra: 1rem; fondo: 2rem; sinistra: 1rem; .relative_one_value position: relative; inizio: 3rem; a destra: 3rem; fondo: 3rem; a sinistra: 3rem;
Maggiori informazioni sulla posizione postcss all'indirizzo: https://github.com/seaneking/postcss-position
Imposta Larghezza e Altezza in una volta
Il plug-size di Postcss di Andrey Sitnik ti consente di scricchiolare il spesso usato larghezza e altezza proprietà in un singolo taglia proprietà. Puoi usarlo in due modi: passando due valori con il primo valutando in larghezza e il secondo in altezza, o passando un valore che verrà usato sia per larghezza che per altezza.
Prova questo aggiungendo il seguente CSS al tuo file "src / style.css":
.size_a size: 1rem 2rem; .size_b size: 1rem;
Nella compilazione, dovresti vedere questo codice ora nel tuo file "dest / style.css":
Maggiori informazioni sulla dimensione di postcss all'indirizzo: https://github.com/postcss/postcss-size
Imposta spaziatura verticale e orizzontale
Essendo un grande amante della codifica efficiente, quando scrivevo margini e padding, che sono spesso uguali su due lati, mi sono spesso ritrovato a desiderare che esistesse una scorciatoia per dichiarare la spaziatura verticale e orizzontale contemporaneamente. Ho persino scritto alcuni mix del preprocessore per fare proprio questo. Ma non avrò più bisogno di quei mixin grazie al plugin postcss-verthorz di David Hemphill.
Con questo plugin puoi usare padding-vert o margin-vert per impostare la spaziatura verticale, e padding-HORZ o margin-HORZ per impostare la spaziatura orizzontale. Aggiungi il seguente codice di esempio al tuo file "src / style.css" per vedere come funziona:
Puoi anche abbreviare ulteriormente queste proprietà abbreviandole a due lettere. Il codice di esempio che abbiamo usato sopra potrebbe essere abbreviato al seguente e l'output sarebbe esattamente lo stesso:
.spacing_short pv: 1rem; mh: 2rem;
Maggiori informazioni su postcss-verthorz su: https://github.com/davidhemphill/postcss-verthorz
Codici colore di uscita
Il mio colore di testo predefinito preferito è # 232323 e non so se sono solo io, ma mi stanco di battere più e più volte le stesse due cifre. Spesso desideravo che ci fosse una scorciatoia, simile al modo in cui puoi tagliare #ffffff giù verso #F F F. Con il plugin postcss-color-short di Andrey Polischuk, c'è.
Quando si utilizza questo plugin, se si imposta un codice colore a due cifre, tali cifre verranno ripetute fino a quando non verrà creato un codice a sei cifre, ad es. # 23 diventerà # 232323. Se imposti un codice colore a una cifra, verrà ripetuto finché non ci saranno tre cifre, ad es. #f diventerà #F F F. Puoi persino usarlo per impostare RGBA () colori, dove la prima cifra che passi sarà ripetuta tre volte, e la seconda usata come valore alfa, per es. rgba (0, 0,5) diventerà rgba (0, 0, 0, 0,5).
Aggiungi quanto segue al tuo file "src / style.css" per provare tutto quanto sopra:
Maggiori informazioni su postcss-color-short all'indirizzo: https://github.com/andrepolischuk/postcss-color-short
Riassumendo
Ricapitoliamo rapidamente tutto quello che abbiamo passato in questo tutorial:
Piccole attività quotidiane di codifica non sembrano molto individuali, ma sommano una quantità enorme di tempo nel complesso, quindi è utile ridurle
Il plugin postcss-alias ti consente di creare la tua scorciatoia per le proprietà
Il plugin postcss-crip ha centinaia di abbreviazioni di proprietà predefinite
Il postcss-font-mago ti consente di usare caratteri personalizzati come se fossero font di default, generatori automatici @ Font-face codice per te
I plugin postcss-circle e postcss-triangle rendono la creazione di cerchi e triangoli CSS semplici e intuitivi
Il plugin postcss-all-link-colors ti consente di stampare i colori per tutti gli stati dei tuoi link contemporaneamente
Il plugin postcss-center fornisce il centraggio verticale e orizzontale con In alto: centro; e a sinistra: centro;
Il plugin postcss-clearfix ti consente di mostrare il codice di clearfix con chiaro: correzione;
Il plugin postcss-position ti consente di aggiungere il tuo superiore, destra, parte inferiore e sinistra impostazioni come parte del tuo uso del posizione proprietà
Il plug-in per le dimensioni postcss ti consente di impostare larghezza e altezza contemporaneamente
Il plugin postcss-verthorz consente di produrre spaziature orizzontali e spaziature verticali con regole singole.
Il plugin postcss-color-short ti dà la possibilità di usare codici esadecimali a una o due cifre e altre scorciatoie per i colori.
Nel prossimo tutorial
Nel prossimo tutorial passeremo ai plugin che sono grandiosi, ma non rientrano in nessuna categoria particolare. Ci vediamo presto in "Miscellaneous Goodies".
Share
Accentsconagua
