Preprocessore CSS: panoramica, la selezione, l'applicazione

Assolutamente tutti i web designer esperti usano il preprocessore. Non ci sono eccezioni. Se si vuole avere successo in questa attività, non dimenticate su questi programmi. A prima vista, possono causare un novizio orrore silenzioso – è troppo simile alla programmazione! In realtà, si può trattare con tutte le caratteristiche del preprocessore CSS per circa un giorno, e se si prova, poi un paio di ore. In futuro, si semplificano notevolmente la vita.

Come ha fatto CSS preprocessore

Per capire meglio le caratteristiche di questa tecnologia, approfondire brevemente la storia della presentazione visiva delle pagine Web.

Quando appena iniziato l'uso massiccio di Internet, non esistono i fogli di stile. Esecuzione di documenti dipendeva interamente sul browser. Ognuno di loro avevano i loro stili, che sono stati utilizzati per il trattamento di alcuni tag. Di conseguenza, le pagine di un aspetto diverso a seconda dell'ordine in cui il browser si aprirli. Il risultato – il caos, confusione, problemi per gli sviluppatori.

Nel 1994, lo scienziato norvegese Håkon Lie ha sviluppato un foglio di stile che potrebbe essere utilizzato per l'aspetto delle pagine separatamente dal documento HTML. L'idea priglanulas membri del W3C, che ha subito deciso di completamento. Pochi anni dopo ha pubblicato una prima versione della specifica CSS. Poi è stata costantemente migliorata, in fase di ultimazione … Ma il concetto è rimasto lo stesso: ogni stile impostato alcune proprietà.

Usando le tabelle CSS è sempre stato problematico. Ad esempio, web designer spesso avuto problemi con l'ordinamento e raggruppamento caratteristiche, e l'ereditarietà non è così semplice.

E poi venne il duemila. Marcature sono sempre più hanno iniziato a impegnarsi in sviluppatori front-end professionali, il che è importante essere stili di lavoro flessibili e dinamiche. Esisteva al collocamento di tempo richiesto prefissi CSS e il monitoraggio supportare le nuove funzionalità del browser. Poi, da JavaScript, e gli esperti Rubino messi al lavoro, la creazione di un preprocessore – sovrastrutture per i CSS, nuove caratteristiche sono aggiunti ad esso.

CSS per principianti: caratteristiche del preprocessore

Essi hanno diverse funzioni:

• unificare i prefissi del browser e cachi;

• semplificare sintassi;

• dare l'opportunità di lavorare con selettori nidificate senza errori;

• migliorare styling logica.

In breve: il preprocessore aggiunge capacità logiche di programmazione CSS. Ora, lo stile non viene eseguita nella lista abituale di stili e con pochi semplici tecniche e gli approcci: variabili, funzioni, Myxinidae, cicli condizioni. Inoltre, la capacità di utilizzare la matematica.

Vedendo la popolarità di questi componenti aggiuntivi, il W3C ha iniziato ad aggiungere gradualmente la possibilità di loro nel codice CSS. Ad esempio, nella specifica quindi non funzione Calc (), che è supportato da molti browser. Si prevede che presto sarà possibile impostare le variabili e creare un Myxinidae. Tuttavia, ciò avverrà in un futuro lontano, e preprocessori già qui e già lavorare bene.

preprocessori Popolare CSS. insolenza

Progettato nel 2007. Originariamente un componente Haml – un modello HTML. Nuove funzionalità per elementi CSS controllano sviluppatori gustato sul Ruby on Rails, che ha cominciato a diffondersi ovunque. Il Sass un numero enorme di caratteristiche che sono ora inclusi in qualsiasi preprocessore: variabili, incorporamento di selettori, (allora, però, non è possibile aggiungere questi argomenti) Myxinidae.

Dichiarazione di variabili a Sass

Le variabili dichiarate con il simbolo $. Essi possono mantenere le loro proprietà e set, per esempio: "$ borderSolid: rosso solido 1px;". In questo esempio, abbiamo dichiarato una variabile chiamata borderSolid e salvato valore di rosso 1px solid. Ora, se nel CSS abbiamo bisogno di creare una larghezza bordo rosso di 1px, semplicemente indica che variabile dopo il nome della proprietà. Dopo l'annuncio delle variabili non possono essere cambiati. Ci sono diverse funzioni incorporate. Ad esempio, dichiarare una variabile con un valore di $ redcolor # FF5050. Ora, nel codice CSS nelle proprietà di qualsiasi elemento, utilizzarlo per impostare il colore del carattere: p {color: $ redcolor; }. Vuoi sperimentare con il colore? Utilizzare funzione scurire o schiarire. Questo è fatto in modo da: p {color: scurire ($ redcolor, 20%); }. Di conseguenza, il redcolor colore sarà più chiaro del 20%.

Le numerose funzioni Sass incorporati. Vale la pena almeno leggerle, ma meglio – per imparare.

annidamento

In precedenza, per indicare la nidificazione dovuto usare un disegno lungo e scomodo. Immaginiamo che abbiamo un div, che è p, e in essa, a sua volta, di misura impostata. Per il div, abbiamo bisogno di impostare il colore del carattere rosso, per p – giallo, per la durata – rosa. In un tipico CSS sarebbe stato fatto nel modo seguente:

div {

colore: rosso;

}

div p {

colore: giallo;

}

div p arco {

colore: rosa;

}

Con preprocessore CSS tutto diventa più facile e più compatta:

div {

colore: rosso;

p {

colore: giallo;

.span {

colore: rosa;

}

}

}

Elementi letteralmente "investito" l'un l'altro.

direttive del preprocessore

Utilizzando direttive @import grado di importare i file. Ad esempio, abbiamo il file fonts.sass che dichiara gli stili per i font. Collegarlo al style.sass file principale: 'font' @import. Fatto! Invece di un singolo file di grandi dimensioni con gli stili che abbiamo alcuni che può essere utilizzato per l'accesso rapido e facile alle proprietà richieste.

Myxinidae

Una delle idee più interessanti. Permette una linea a chiedere una serie di proprietà. Operare nel modo seguente:

@mixin largeFont {

font-family: 'Times New Roman';

font-size: 64px;

line-height: 80px;

font-weight: bold;

}

Myxinidae da applicare al elemento della pagina, utilizzare la direttiva @include. Ad esempio, vogliamo applicarlo alla intestazione H1. Abbiamo la seguente struttura: h1 {@include: largeFont; }

Tutte le proprietà di Myxinidae viene assegnato un elemento h1.

preprocessore Meno

Sintassi Sass ricorda programmazione. Se siete alla ricerca di un'opzione che è più adatto per i principianti che studiano i CSS, cercare meno. E 'stato creato nel 2009. La caratteristica principale – il supporto per la sintassi nativa CSS, così poco familiare con Imposer programmazione sarà più facile da imparare.

Le variabili sono dichiarate usando il simbolo @. Ad esempio: @fontSize: 14px;. opere di nidificazione sugli stessi principi come in Sass. Myxinidae sono annunciati come segue: .largeFont () {font-family: 'Times New Roman'; font-size: 64px; line-height: 80px; font-weight: bold; }. Per il collegamento non è necessario utilizzare direttive del preprocessore – basta aggiungere il Missina appena creata nelle proprietà dell'elemento selezionato. Per esempio: h1 {.largeFont; }.

stilo

Un altro preprocessore. Creato nel 2011 dallo stesso autore, che ha dato al mondo di Giada, Express e altri prodotti utili.

Le variabili possono essere dichiarate in due modi – esplicitamente o implicitamente. Ad esempio: font = 'Times New Roman'; – un'opzione implicita. Ma $ font = 'Times New Roman' – chiaro. Myxinidae sono dichiarati e implicitamente collegata. La sintassi è la seguente: redcolor () di colore rosso. Ora siamo in grado di aggiungere la voce, per esempio: redcolor h1 ();.

Stilo a prima vista può sembrare incomprensibile. Dove è le staffe "nativi" e punti e virgola? Ma è necessario immergersi in esso, tutto diventa molto più chiaro. Ricordate, però, che lo sviluppo a lungo termine di questo preprocessore può "svezzare" si utilizza la sintassi CSS classico. Questo a volte causa problemi quando dover lavorare con uno stile "puro".

Cosa preprocessore scegliere?

In realtà, è … non importa. Tutte le versioni offrono circa le stesse caratteristiche solo la sintassi di ciascuno è diversa. Si consiglia di procedere come segue:

• se – programmatore e vogliono lavorare con gli stili sia nel codice, utilizzare il Sass;
• se – un codificatore e vogliono lavorare con gli stili come con il layout convenzionale, prestare attenzione ai meno;
• se ti piace il minimalismo, utilizzare lo stilo.

Per tutte le varianti di un numero infinito di librerie interessanti in grado di semplificare ulteriormente lo sviluppo. Gli utenti Sass raccomanda di prestare attenzione alla bussola – un potente strumento con molte caratteristiche incorporate. Ad esempio, dopo averlo installato non dovrete mai preoccuparvi di prefisso versione fornitore. Semplifica il lavoro con le griglie. Ci sono strumenti per lavorare con i fiori, sprite. Una gamma già annunciato Myxinidae. Dare a questo strumento un paio di giorni – quindi vi farà risparmiare un sacco di tempo e fatica in futuro.