Що таке less?

Всім привіт! Сьогодні ми поговоримо про те, що таке less.js і як його використовувати.

Можливо, ви чули такий вислів: "Препроцесорів CSS"? Ось сьогодні ми розберемо один з них - LESS.

Навіщо потрібен LESS?

LESS допомагає додати нові можливості, зробити ваш код більш красивим і гнучким. Препроцесори трохи схожі на мови програмування: там є змінні, функції, операції і т.д. Уявімо, що у вас є багато всяких блоків, у яких свій колір, і з часом ви вирішили змінити колір сайту. на чистому CSS це може бути дуже складним, коли на LESS ви можете помістити кольору в змінні, які потім використовувати в блоках, і, якщо ви захочете змінити колір, то вам потрібно буде його поміняти лише в однієї змінної. Після того, як ваш код на LESS буде написаний, ви зможете скомпілювати його в CSS і вставити собі на сайт.

Початок роботи

Для початку скачайте бібліотеку less.js з сайту https://lesscss.org/

 
lang="Ru"gt; 
 
charset="UTF-8"gt; 
less.js 
rel="Stylesheet"href="Style.less"gt; 
 
 
 
id="Container"gt; 
id="Nav"gt; 
 
 href="#"gt;Головна 
 href="#"gt;документація 
 href="#"gt;навчання 
 href="#"gt;завантажити 
 href="#"gt;Контакти

Структура проста: нумерований список, який буде нашим меню. Але зауважте, що в тезі 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:15px30px- 
 border-right:1px solid fadeout(@textColor,60%) - 
 
 .gradient(@ mainColor2,@mainColor) - 
} 
} 
} 
} 
 
.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

Зараз у нас все прекрасно працює, але заливати файли на сервер в такому вигляді не варто. Чому? Тому, що у людини в браузері може бути відключений jаvascript, і тоді наші стилі вже не спрацюють. Тому less найкраще використовувати при розробці, а коли все вже готовий, скомпілювати в css і вже його заливати на сервер. Для цього є, наприклад, онлайн компілятори. Один з них - https://leafo.net/lessphp/ вставте зліва less код, а потім натисніть compile. Праворуч ви побачите готовий css код.

Отже, сьогодні ми розібралися, що таке less і як його використовувати. Побачимося в наступній статті.

Поділися в соціальних мережах:

Схожі