Що таке less
Всім привіт! Сьогодні ми поговоримо про те, що таке less.js і як його використовувати.
Можливо, ви чули такий вислів: "препроцесорів CSS". Ось сьогодні ми розберемо один з них - LESS.
Навіщо потрібен LESS?
LESS допомагає додати нові можливості, зробити ваш код більш красивим і гнучким. Препроцесори трохи схожі на мови програмування: там є змінні. функції. операції і т.д. Уявімо, що у вас є багато всяких блоків, у яких свій колір, і з часом ви вирішили змінити колір сайту. На чистому CSS це може бути дуже складним, коли на LESS ви можете помістити кольору в змінні, які потім використовувати в блоках, і, якщо ви захочете змінити колір, то вам потрібно буде його поміняти лише в однієї змінної. Після того, як ваш код на LESS буде написаний, ви зможете скомпілювати його в CSS і вставити собі на сайт.
Початок роботи
Структура проста: нумерований список, який буде нашим меню. Але зауважте, що в тезі head ми підключаємо скачаний з сайту less.js. а всі стилі для нього ми будемо писати в файлі style.less. який також підключаємо.
Пишемо стилі. файл style.less
@mainColor: # 233A59;
@ MainColor2: lighten (@mainColor, 30%);
@textColor: # f7f7f7;
div # nav ul li list-style: none;
a text-decoration: none;
font-family: verdana;
font-size: 14px;
color: @textColor;
float: left;
padding: 15px 30px;
border-right: 1px solid fadeout (@textColor, 60%);
gradient (@col, @ col2) background-color: @col;
background-image: gradient (linear, left top, left bottom, from (@col), to (@ col2));
background-image: linear-gradient (top, @col, @ col2);
>
Отже, давайте розбиратися, що ж ми тут написали.
По-перше, за допомогою такого синтаксису: @name створюються змінні в less. Ми можемо записати туди, що хочемо. У нашому випадку у нас є змінні mainColor і textColor. які зберігають колір для нашого меню і тексту і змінна mainColor2. де, зауважте, ми використовуємо функцію lighten. яка допомагає освітлити наш колір. У нашому випадку освітлення буде 30%
Наступна відмінність - вкладеність. Помітили, що ми не пишемо div # nav. потім # div # nav ul і так далі, а вкладаємо наш список, посилання та інше всередину. Зручно, правда?
Щоб зробити градієнт, ми створили свою власну функцію, яка виглядає як клас і називається .gradient. Вона приймає 2 параметра і використовує їх для того, щоб створити градієнт. Викликаємо ми її в нашому посиланню, куди передаємо змінні @mainColor і @ mainColor2. Ще одна функція, яку ми використовуємо на засланні - fadeout. Вона дозволяє знизити прозорість. Ми вибрали значення 60%
Компіляція в CSS
Отже, сьогодні ми розібралися, що таке less і як його використовувати. Побачимося в наступній статті.