Какво е по-малко

Здравейте на всички! Днес ние ще говорим за това, което less.js и как да го използвате.

Може да сте чували този израз: "Препроцесори CSS". Тук днес ще разгледаме една от тях - по-малко.

Защо ми е необходим по-малко?

ПО-МАЛКО помага да се добавят нови функции, за да направите вашата програма по-красив и гъвкав. Препроцесори малко като езици за програмиране: има променливи. функция. работа и т.н. Представете си, че имате всички видове блокове, които имат различен цвят на кожата, и в крайна сметка реши да промени цвета на сайта. В чист CSS тя може да бъде много трудно, когато по-малко можете да сложите цвят в променливи, които след това могат да бъдат използвани в блоковете, и ако искате да промените цвета, ще трябва да го промени само в една променлива. След като вашият код е написан по-малко, можете да го компилирате в CSS и поставите на вашия сайт.

Първи стъпки

Структурата е проста: номериран списък, който ще бъде нашето меню. Но имайте предвид, че в главата на етикет свързваме less.js. изтеглени от уебсайта и всички стилове за него, ние ще пишат style.less файл. който е свързан.

Пишем стилове. style.less файл

@mainColor: # 233A59;
@ MainColor2: облекчи (@mainColor, 30%);
@textColor: # f7f7f7;

Разделение # навигация ул ли списък стил: няма;
текстови декорация: няма;
шрифт семейство: Verdana;
шрифта: 14px;
Цвят: @textColor;
плаваш: ляв;
подложка: 15px 30px;
граница десен: 1px твърдо вещество fadeout (@textColor, 60%);

градиент (@col, @ col2) фон цвят: @col;
фон изображение: градиент (линейна, левия отгоре, отляво дъно, от (@col) до (@ col2));
фон изображение: линеен градиент (горе, @col, @ col2);
>

Така че, нека да се разбере това, което е написал тук.

На първо място, с помощта на този синтаксис: @name променливи са създадени за по-малко. Можем да ни пишете, че желание. В нашия случай, ние имаме променливи и mainColor цвят на текст. който се съхранява цвета на нашите менюта и текст и променлива mainColor2. което, имаш ли нещо против, ние използваме Облекчете. което помага да се облекчи нашия цвят. В този случай, изясняване ще бъде 30%

Друга разлика - гнездене. Трябва да отбележим, че ние не се напише Разделение # NAV. след # DIV # навигация ул и така нататък, и да инвестира в нашия списък, категория, и т.н. вътре. Удобен е, нали?

За да направи градиента, създадохме нашата собствена функция, която прилича на клас, наречен .gradient. Това отнема 2 параметри и ги използва, за да се създаде градиент. Ние я наричаме в нашата връзка, където peredaom @mainColor променливи и @ mainColor2. Друга функция, която ние използваме в линка - fadeout. Тя ви позволява да се намали прозрачността. Избрахме стойност от 60%

Съставяне на CSS

Така че сега сме разбрали това, което е по-малко и как да го използвате. Ще се видим в следващата статия.