Ce este mai puțin

Bună ziua tuturor! Astăzi vom vorbi despre ce less.js și cum să-l folosească.

Este posibil să fi auzit această expresie: „preprocessors CSS“. Aici astăzi ne vom uita la unul dintre ei - mai.

De ce ai nevoie de mai puțin?

PUȚIN ajută pentru a adăuga noi caracteristici pentru a face codul mai frumos și flexibil. Preprocessors biți ca limbaje de programare: există variabile. funcție. operație etc. Imaginați-vă că aveți o mulțime de toate blocurile care au o culoare diferită, și în cele din urmă vă decideți pentru a schimba culoarea site-ului. În CSS pură poate fi foarte dificil atunci când PUȚIN puteți pune culoarea în variabile, care pot fi apoi utilizate în blocuri, și, dacă doriți să modificați culoarea, va trebui să-l schimbe într-o singură variabilă. După ce codul este scris pe mai puțin, puteți compila în CSS și lipiți site-ul dumneavoastră.

Noțiuni de bază

Structura este simplu: o listă numerotată, care va fi meniul nostru. Dar, rețineți că, în cap tag-ul conectăm less.js. descărcate de pe site-ul și toate stilurile pentru el, vom scrie în fișierul style.less. care este, de asemenea, conectat.

Noi scriem stiluri. fișier style.less

@mainColor: # 233A59;
@ MainColor2: ușura (@mainColor, 30%);
@textColor: # f7f7f7;

div # nav ul li list-style: none;
un text-decoration: none;
font-family: Verdana;
font-size: 14px;
Culoare: @textColor;
float: left;
padding: 15px 30px;
border-dreapta: fadeout solid 1px (@textColor, 60%);

gradient de (@col, @ col2) background-color: @col;
background-image: Gradient (liniar, stanga sus, stanga jos, de la (@col), la (@ col2));
background-image: gradient liniar (top, @col, @ col2);
>

Deci, trebuie să înțelegem ceea ce am scris aici.

În primul rând, folosind această sintaxă: variabilele @name sunt create în mai puțin. Putem scrie din nou această dorință. În cazul nostru, avem variabile și mainColor textcolor. care stochează culoarea pentru meniuri și textul nostru, și variabile mainColor2. care, te superi, vom folosi mai deschis. care ajută pentru a ușura culoarea noastră. În acest caz, o clarificare va fi de 30%

O altă diferență - cuiburi. Menționăm că nu scrie div # NAV. apoi # div # nav ul și așa mai departe, și să investească lista noastră, link-ul, etc interior. Convenabil, nu-i așa?

Pentru a face gradientul, am creat funcția sa proprie, care arată ca o clasă numită .gradient. Este nevoie de 2 parametri și le utilizează pentru a crea un gradient. Noi o numim în link-ul nostru, unde peredaom @mainColor variabile și @ mainColor2. O altă caracteristică pe care le folosim în link-ul - fadeout. Acesta vă permite să reduceți opacitatea. Am ales o valoare de 60%

compilarea CSS

Deci, acum am înțeles ce este mai puțin și cum să-l folosească. Ne vedem în articolul următor.