Share
Nella prima parte di questa serie ho dato una rapida panoramica dei popolari preprocessori CSS LESS e SASS. Ho anche condiviso alcuni dei framework in cui vengono utilizzati.
Ho intenzione di fare un tuffo più profondo in LESS e di parlare delle parti della lingua che uso più spesso. Ho anche intenzione di mostrarti come iniziare ad usarlo con CodeKit.
Scaviamo dentro!
Io personalmente uso MENO per la maggior parte dei progetti WordPress. Trascorro molto tempo a lavorare con Standard e utilizza Bootstrap come framework di scelta.
Dal momento che Bootstrap usa LESS per compilare il suo CSS, ho imparato come usarlo .Di meno file per apportare modifiche. Conosco altri web designer e sviluppatori che preferiscono utilizzare Foundation. Poiché Foundation utilizza SASS, hanno invece imparato a utilizzarlo.
Sto iniziando personalmente a lavorare su un altro progetto web che utilizza SASS, ed è stato relativamente facile raccogliere le cose a causa della mia esperienza con LESS.
Le variabili sono piuttosto auto-esplicative. Puoi creare una variabile da qualche parte nel tuo .Di meno file e quindi fare riferimento in altri posti in quel file o altri file. Tendo ad usarlo per colori, caratteri, riempimento e margini.
Ecco un esempio:
// Variabili @red: # ff0000; @ verde: # 00ff00; @blue: # 0000ff; // Styling // Collega a color: @blue; a: visited color: @blue;
Questo verrà poi compilato per questo:
a color: # 0000ff; a: visited color: # 0000ff;
Se si desidera modificare il colore di entrambi gli stili di collegamento, è sufficiente modificare la variabile:
@blu
a partire dal
# 0000FF
a
# 0000a4
Si modifica in un punto, si ricompila e sono state modificate tutte le istanze di tale variabile nel file.
Un altro ottimo modo per usare anche queste variabili sarebbe usare più nomi semantici come:
@colore primario
e
@secondaryColor
È quindi possibile utilizzare tali variabili in tutto il codice. Quando il tuo designer ha scelto quei colori, puoi cambiarli una volta, ricompilare, e il gioco è fatto!
L'annidamento viene utilizzato proprio come si anniderebbe la logica in un se altro blocca in PHP o JavaScript: imposta il tuo selettore di livello superiore come .inviare, quindi posizionare gli altri selettori all'interno di esso. Eliminerà la necessità di digitare ripetutamente .inviare di fronte agli altri selettori in questo modo:
// Post .post padding: 20px; .post-header margin: 20px 0;
Questo verrà poi compilato per questo:
.post padding: 20px; .post .post-header margin: 20px 0;
Puoi anche usare & per concatenare anche i selettori. Un esempio potrebbe essere se si desidera scegliere come target specifici widget nella barra laterale. Supponiamo che tu voglia modificare in modo diverso il colore di sfondo dei messaggi Messaggi recenti e Commenti recenti. Puoi fare quanto segue in MENO:
.widget padding: 20px; & .widget_recent_entries background-color: white; & .widget_recent_comments background-color: black;
Quello si compilerebbe in questo:
.widget padding: 20px; .widget.widget_recent_entries background-color: white; .widget.widget_recent_comments background-color: black;
Puoi anche usarlo per le pseudo classi come : hover, :attivo, : visited, :prima, e :dopo.
// Collega a color: blue; &: hover color: red; &: visited color: red;
Quello sarebbe compilare a questo:
a colore: blu; a: hover color: red; a: visited color: red;
I mixin sono fondamentalmente un numero di attributi di stile che vuoi raggruppare. Un grande esempio di questo è per gli attributi che sono diversi tra i browser come il raggio di confine.
Invece di doverli ricordare ognuno, puoi chiamare il tuo mixin e fornirà per te ciascun attributo. Ecco un esempio:
// Mixin .border-radius border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; // Widget .widget .border-radius;
Questo verrà compilato come segue:
.widget border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
Che cosa succede se si desidera utilizzare il raggio di confine più volte nel tuo .Di meno file ma volevano importi diversi per ciascuno? Questo è il momento in cui useresti un Mixin parametrico.
Ciò significa semplicemente che puoi riutilizzare un mixin e passarlo come argomento da usare. Ecco un esempio:
// Mixin .border-radius (@radius: 4px) border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; // Widget .widget .border-radius (); // Post .post .border-radius (8px);
Quello sarebbe compilare a questo:
.widget border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; .post border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;
Ecco un esempio di utilizzo di variabili, nidificazione e mixaggi tutti allo stesso tempo:
// Variabili @ widget-recent-posts-border-radius: 4px; @ widget-recent-posts-background-color: bianco; @ widget-recent-posts-link-color: @blue; @ widget-recent-comments-border-radius: 8px; @ widget-recent-comments-background-color: nero; @ widget-recent-comments-link-color: @red; // Colors @blue: # 0000ff; @rosso: # ff0000; // Mixins .border-radius (@radius: 4px) border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; // Widget .widget & .widget_recent_entries background-color: @ widget-recent-posts-background-color; .border-raggio (@ Widget-ultimi-messaggi-border-radius); ul li a color: @ widget-recent-posts-link-color; & .widget_recent_comments background-color: @ widget-recent-comments-background-color; .border-raggio (@ Widget-ultimi-commenti-border-radius); ul li a color: @ widget-recent-comments-link-color;
Il che si integrerebbe in questo:
.widget.wiget_recent_entries background-color: white; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; .widget.widget_recent_entries ul li a color: # 0000ff; .widget.wiget_recent_comments background-color: black; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; .widget.widget_recent_entries ul li a color: # ff0000;
È estremamente semplice configurare il tuo progetto CodeKit. Puoi semplicemente trascinare e rilasciare la tua cartella in CodeKit, oppure puoi fare clic sul pulsante più in basso a sinistra e quindi selezionare una cartella dal browser dei file.
Una volta fatto ciò, CodeKit eseguirà automaticamente la scansione di tutti i file in quella cartella e quindi li raggrupperà nelle seguenti categorie:
Quindi ora hai importato i tuoi file di progetto. Quindi imposteremo il percorso di output del tuo .Di meno File. Suggerirei di avere un css cartella e a Di meno cartella al suo interno. Dovrai assicurarti di avere tutti i tuoi file in questo Di meno cartella per indicare il tuo style.less file.
Dovrai passare alla visualizzazione Stili. Vogliamo avere il style.less file essere compilato nella cartella radice del tuo tema come style.css. Per fare ciò, dovrai fare clic con il tasto destro del mouse su style.less file e selezionare "Imposta il percorso di output ... Msgstr "" "Questo visualizzerà un browser di file.
Successivamente, si vorrà fare clic sul nome del file di output e l'immissione del testo dell'estensione. Una volta che lo fai, potrebbe popolarsi automaticamente style.css per te. Se così non fosse, allora vorrai entrare style.css. Infine cliccherete su Selezionare salvare.
Siamo quasi li! Successivamente dovremo selezionare un'impostazione di compilazione. Vedrai apparire la schermata delle impostazioni della compilazione quando fai clic su a .Di meno file. Abbiamo tre stili di output disponibili:
Seleziona uno dei precedenti e clicca su "Compilare"Dovresti ricevere una notifica che il tuo style.less il file è stato compilato.
Se tutta la sintassi è corretta, la compilazione avrà esito positivo. Se ci sono errori, ti farà passare a Login visualizza e fornisci il numero di riga e la spiegazione dell'errore.
Se tutto è compilato correttamente, dovresti essere in grado di aprire il tuo style.css file e vedere l'output. Mentre modifichi il tuo .Di meno file e salvarli, CodeKit ricompilerà automaticamente i tuoi file.
Nota: assicurarsi di non apportare modifiche al file style.css file, perché non appena ricompilate il vostro .Di meno file, le tue modifiche saranno sovrascritte.
Ora abbiamo attraversato un tuffo più profondo in LESS e analizzato alcune delle caratteristiche più popolari. Ho spiegato alcuni motivi per cui scelgo personalmente di usare LESS nei miei progetti WordPress e come usare CodeKit per compilare tutti i miei file.
Nel prossimo post, approfondirò su come strutturare il tuo '.Di meno'file e collegarli tutti insieme.
Accentsconagua