Programabile stiluri de limbă mai puțin

CSS - o pagină de limbaj stilizare puternic și interesant. Este rapid și simplu, dar cel mai important, în versiunea minimă acceptată de toate browserele absolut fie că este vorba de dispozitiv mobil mic, sau un televizor imens.

Cu toate acestea, pentru toate meritele sale incontestabile în CSS există unele, chiar si defecte, dar limitat. Aceste limitări nu sunt critice, dar se poate prelungi semnificativ timpul redactării.

Ce pot exista restricții. De exemplu, culoarea. Dacă vom vedea o intrare similară # FF9F94. este imposibil să se determine imediat că aceasta denotă o culoare piersica închis. Este mult mai ușor de a crea o variabilă, de exemplu darkPeach. atribuie o valoare # FF9F94 și apoi să utilizați această variabilă într-o foaie de stil. Ce confort poate aduce pentru ei înșiși: nu trebuie să vă amintiți codul de culoare pentru a indica în altă parte, pentru a schimba o culoare peste masa suficienta pentru a schimba valoarea variabilei.

Cu alte cuvinte, CSS îi lipsește un pic de programare și logică pentru a face de lucru cu ei mai practice. Ei bine, că pentru aceasta există o serie de instrumente, printre care este mai puțin.

Ce este mai puțin?

un limbaj dinamic stylesheet, un fel de add-on CSS, care adaugă CSS într-un set de proprietăți dinamice - mai puțin: variabile, de amestecare, operații, funcții, etc.

Mai puțin - este un script care poate fi folosit atat pe partea de client (CSS-tabel este calculat în browser-ul unui utilizator) sau pe lateral. Cu toate acestea, există modalități mai bune de a utiliza mai puține - de exemplu, o compilație preliminară a tabelului. În acest caz, puteți obține o foaie de stil standard care vor fi utilizate în mod corespunzător de către browser și nu necesită constantă re-converti.

variabile

Variabilele în mai funcționează în același mod ca și în alte limbaje de programare. Puteți crea o variabilă, atribui o valoare pentru ea, și puteți continua să-i folosească în orice regulă CSS. De exemplu:

În acest caz, variabila @ Serif-font păstrează numele fontului. Dacă doriți să schimbați fontul din Georgia, Times New Roman, apoi schimba valoarea destul de variabilă și modificați valoarea fontului în întregul document. Mai convenabil de a folosi variabile cu coduri de culoare. De exemplu, CSS următorul pasaj

poate fi înlocuit cu următorul text:

După cum puteți vedea, este suficient pentru a corecta culoarea în antetul CSS-document pentru a le repara pe tot parcursul documentului.

Avem un domeniu de aplicare variabil. În cadrul fiecărei regulă, puteți realoca valoarea acestei reguli. În exemplul următor, culoarea link-ul va fi de culoare albă, și culoarea de fundal a butonului - gri:

Este important de notat faptul că variabilele în mai puțin probabil mai aproape de constantele cum le realocați mai jos codul nu este posibil, în anumite reguli.

PUȚIN permite operarea în cadrul normelor care permite un control precis al valorilor:

După cum se poate observa din codul de mai sus, variabila @unit este setată la 3PX. Acesta este introdus în valoarea lățimii frontierei. Indents respectiv obținute prin înmulțirea acestei valori este de 3 sau 2.

Cu cât mai puțin puteți utiliza toate operațiile aritmetice. Dispozitivele pot fi nu numai valorile numerice, dar, de asemenea, culorile. Pentru a efectua așa-numita amestecarea culorilor. Dacă doriți să schimbați culoarea, o puteți face prin amestecarea sau scăderea de o culoare diferită:

Operația de mai sus este fundal crește fiecare valoare HEX de 2. Rezultatul va fi # B64141 - o versiune mai ușoară a culorii originale. cadru de funcționare va reduce valoarea fiecărui HEX 1 și va da o culoare mai închisă: # 830E0E. În practică, există multe cazuri când începem cu o culoare de bază și au nevoie de un ușor sau întunecă versiunea sa.

Lucrul cu culoare

Există și alte oportunități de a lucra cu culoare. Puteți modifica luminozitatea, satura, decolora și rândul său, de culoare. Acest lucru se realizează prin utilizarea unor caracteristici de culoare.

Exemple de utilizare și a afișa rezultatele a se vedea tabelul de mai jos:

Fiecare culoare în mai puțin este convertit la HSL (nuanță, saturație, luminozitate), pentru a vă asigura că aveți un control asupra nivelurilor canalelor. Acest lucru face posibil pentru a manipula culorile mai subtile, precum și a obține informații despre culoarea direct:

Ce face? O persoană normală este dificil de a recunoaște ceea ce cod de culoare HEX este criptat, dar mai puțin nu funcționează cu codul în sine, și cu un ton pe care el stabilește. Să presupunem că găsiți o culoare violet care iti place (# e147d4). Dar acum ai nevoie de o nuanta cremoasa de ea, atunci vă poate ajuta următoarele construirea a două funcții:

cuiburi

Unul dintre principalele avantaje ale CSS este o cascadă actualizează stilurile sale. Aceasta este, pentru a seta articol stil de paragraf în interiorul containerului pe care doriți să utilizați acest cod:

Și asta e bine, dar ce se întâmplă dacă aveți nevoie pentru a cere câteva stiluri pentru elemente din cadrul acelui bloc. Apoi, va trebui să construiască în mod constant pe .article înainte de a stabili regulile. PUȚIN permite stiluri imbricate, făcând astfel mai ușor de a scrie cod:

Indents sunt opționale, dar îmbunătățesc codul de lizibilitate. nivelurile de cuibărit sunt limitate.

Amestecare (mixins)

Pentru a crea un cadru, care are colțuri rotunjite superioare trebuie să utilizeze următorul cod:

Și această bucată de cod pentru a rescrie de fiecare dată când trebuie să faceți este rotunjire. Acest lucru poate fi simplificată prin utilizarea mai puțin. Pentru a face acest lucru, trebuie să creați adaosului. A se vedea, de exemplu:

În acest caz, am creat și a definit clasa rotunjite-top. și apoi importați toate drepturile sale în clasa de top. Și toate stilurile de top din Klas importate să prezinte clasa. inclusiv regulile pentru culorile de fundal și text.

Dacă în mod normal, utilizați aceeași rază de frontieră. dar, uneori, ai nevoie de un alt, trebuie să setați amestecarea valorii forfetare.

În acest caz, tab-ul va fi utilizat de valoarea de clasă în 6px. și să prezinte clasă 3px. Parametrii pot fi multiple.

Pentru mai multe detalii citiți și să înțeleagă mai puțin puteți lesscss.org pe site-ul.

În concluzie, trebuie remarcat faptul că, în ciuda valorii de mai, la fel ca orice tehnologie, este necesar să se folosească întotdeauna cu mintea, nu ar trebui să le abuzeze în situații în care este mai convenabil de a folosi un CSS convențional. Cu toate acestea, în situațiile în care mai este necesar, acesta va deveni un instrument indispensabil și util.