LESS CSS - Посібник для початківців
Попередній процесор CSS став основним елементом веб-розробки. Вона поставляє звичайний CSS з особливостями програмування, такими як змінні, функції або mixin, і операції, які дозволяють веб-розробникам створювати модульні, масштабовані та більш керовані стилі CSS.
На цій посаді ми розглянемо LESS, який був одним з найпопулярніших попередніх процесорів CSS, а також широко використовувався в численних фронтальних рамках, таких як Bootstrap. Ми також підемо через основні утиліти, інструменти та налаштування, які допоможуть вам працювати з LESS.
Компілятор
Для початку нам потрібно налаштувати компілятор. LESS синтаксис є нестандартним, за специфікацією W3C. Браузер не зможе обробляти та відтворювати вивід, незважаючи на спадкові риси, подібні до CSS.
Перегляньте код LESS:
@ color-base: # 2d5e8b; .class1 background-color: @ color-base; .class2 background-color: #fff; колір: @ color-base;
Компілятор обробляє код і перетворює синтаксис LESS у формат CSS, сумісний із браузером:
.class1 background-color: # 2d5e8b; .class1 .class2 background-color: #fff; колір: # 2d5e8b;
Існує ряд інструментів для компіляції CSS:
Використання JavaScript
МЕНШЕ поставляється з less.js файл, який дуже легко розгорнути на вашому веб-сайті. Створити таблицю стилів за допомогою .менше і пов'язувати його в документі за допомогою rel = "таблиця стилів / менше" атрибут.
Ви можете отримати JS-файл тут, завантажити його через менеджер пакетів Bower, інакше це буде безпосередньо на CDN, наприклад:
Ви все налаштовані та можете створювати стилі у межах .менше. Синтаксис LESS буде зібрано на льоту, коли сторінка завантажується. Майте на увазі, що використання JavaScript не рекомендується на стадії виробництва, оскільки це негативно вплине на ефективність веб-сайту.
Ви завжди повинні компілювати синтаксис LESS заздалегідь обслуговувати звичайний CSS замість цього. Можна використовувати Термінал, бігун завдання Грунт або Залпа, або графічне додаток для цього.
Використання CLI
LESS забезпечує власний інтерфейс командного рядка (CLI), lessc, яка обробляє декілька завдань, крім простого формування синтаксису LESS. За допомогою CLI ми можемо накладати коди, стискати файли і створювати вихідну карту. Команда ґрунтується на Node.js, що ефективно дозволяє команді працювати у Windows, OS X і Linux.
Переконайтеся, що Node.js інстальовано (інакше ви знайдете тут інсталятор), а потім встановіть LESS CLI через NPM (менеджер пакетів вузлів) за допомогою наступного командного рядка..
npm інсталювати -g менше
Тепер у вас є lessc команда у вашому розпорядженні для компіляції LESS в CSS:
lessc style.less style.css
Використання бігуна завдань
Бігун завдань - це інструмент, який автоматизує завдання розробки та робочі процеси. Замість того, щоб запустити lessc Команда кожного разу, коли ми хотіли б скомпілювати наші коди, ми зможемо встановити бігун задач і встановити його для перегляду змін в наших файлах LESS і негайно компілювати LESS в CSS.
Двома популярними інструментами в цій категорії сьогодні є Grunt і Gulp. У нас є серія постів, які охоплюють ці інструменти. Перевірте посади, щоб дізнатися, як розгортати ці інструменти в робочому процесі.
- Як використовувати Grunt для автоматизації робочого процесу
- Початок роботи з Gulp.js
- Битва скріптів побудови: Ковчег
Використання графічного застосування
Для тих, хто не може звикнути до використання терміналів і командних рядків, вони можуть вибрати графічний інтерфейс. Існує велика кількість додатків для компіляції МЕНШІ сьогодні для всіх платформ - деякі безкоштовні, деякі платні
Ось повний список:
| App | Платформа | Вартість |
| Суміш | OS X / Windows | Безкоштовно |
| Коала | OS X / Windows / Linux | Безкоштовно |
| Препро | OS X / Windows | Freemium (USD29) |
| Безпечний | Windows | Безкоштовно |
| CodeKit | OS X | USD32 |
Який компілятор ви вибрали (крім JavaScript) не має значення, відверто кажучи, якщо інструмент працює і доповнює ваш робочий процес, скористайтеся цим.
Редактор коду
Можна використовувати будь-який редактор коду. Просто встановіть плагін або розширення, щоб виділити LESS синтаксис з правильними кольорами, функція, яка тепер доступна майже для всіх редакторів коду та IDE, включаючи SublimeText, Notepad ++, VisualStudio, TextMate і Eclipse, щоб назвати декілька.
Тепер, коли у нас встановлено компілятор і редактор коду, можна починати писати стилі CSS за допомогою синтаксису LESS.
LESS Синтаксис
На відміну від звичайного CSS, як ми його знаємо, LESS працює набагато більше як мова програмування. Це динамічно, тому розраховуйте знайти такі термінології, як Змінні, Операція і Область застосування по дорозі.
Змінні
Перш за все, давайте подивимося на Змінні.
Якщо ви працювали досить довго з CSS, ви, мабуть, написали щось на зразок цього, де ми маємо повторювані значення, призначені в блоках декларації у всій таблиці стилів..
.class1 background-color: # 2d5e8b; .class2 background-color: #fff; колір: # 2d5e8b; .class3 border: 1px solid # 2d5e8b;
Ця практика дійсно прекрасна - поки ми не виявимо, що нам доведеться просіювати більше, ніж тисяча або більше подібних фрагментів по всій таблиці стилів. Це може статися при побудові великомасштабного сайту. Робота стане нудною.
Якщо ми використовуємо CSS попередній процесор, подібний LESS, вищевикладений примірник не є проблемою - ми можемо використовувати Змінні. Змінні дозволять нам зберігати константа значення, яке пізніше може бути повторно використано у всій таблиці стилів.
@ color-base: # 2d5e8b; .class1 background-color: @ color-base; .class2 background-color: #fff; колір: @ color-base; .class3 border: 1px solid @ color-base;
У наведеному вище прикладі ми зберігаємо колір # 2d5e8b в @ color-base змінної. Якщо ви хочете змінити колір, нам потрібно лише змінити значення цієї змінної.
Окрім кольору, ви також можете помістити інші значення у змінні, наприклад, наприклад:
@ font-family: Georgia @ dot-border: пунктирна @ перехід: лінійна @opacity: 0,5
Міксини
У LESS ми можемо використовувати Міксини повторне використання цілих декларацій у наборі правил CSS в іншому наборі правил. Ось приклад:
.градієнти фон: #eaeaea; фон: лінійний градієнт (зверху, #eaeaea, #cccccc); фон: -o-лінійний градієнт (зверху, #eaeaea, #cccccc); background: -ms-лінійний градієнт (top, #eaeaea, #cccccc); background: -moz-лінійний градієнт (top, #eaeaea, #cccccc); background: -webkit-лінійний градієнт (top, #eaeaea, #cccccc);
У наведеному вище фрагменті ми задали значення за промовчанням градієнт колір всередині .градієнти клас. Всякий раз, коли ми хочемо додати градієнти, ми просто вставляємо .градієнти сюди:
div .gradients; кордон: 1px solid # 555; радіус кордону: 3px;
The .коробка буде успадковувати весь блок оголошення всередині блоку .градієнти. Отже, вище правило CSS дорівнює наступному звичайному CSS:
div background: #eaeaea; фон: лінійний градієнт (зверху, #eaeaea, #cccccc); фон: -o-лінійний градієнт (зверху, #eaeaea, #cccccc); background: -ms-лінійний градієнт (top, #eaeaea, #cccccc); background: -moz-лінійний градієнт (top, #eaeaea, #cccccc); background: -webkit-лінійний градієнт (top, #eaeaea, #cccccc); кордон: 1px solid # 555; радіус кордону: 3px;
Крім того, якщо ви використовуєте CSS3 багато на вашому сайті, ви можете використовувати LESS елементи, щоб зробити вашу роботу набагато простіше. LESS Elements - це колекція загальних CSS3 Mixins що ми можемо часто використовувати в таблицях стилів, наприклад кордон-радіус, градієнти, тінь і так далі.
Щоб використовувати елементи LESS, просто додайте @import Правило в таблиці стилів LESS, але не забудьте спочатку завантажити його та додати до робочого каталогу.
@import "elements.less";
Тепер ми можемо повторно використовувати всі класи надаються від elements.less, наприклад, додати 3px радіус кордону до a div, ми можемо написати:
div .rounded (3px);
Для подальшого використання зверніться до офіційної документації.
Вкладені правила
Коли ви пишете стилі у звичайному CSS, ви також можете пройти через ці типові кодові структури.
nav висота: 40px; ширина: 100%; фон: # 455868; кордон нижній: 2px твердотільний # 283744; nav li ширина: 600px; висота: 40px; Налаштуйте color: #fff; висота рядка: 40px; текстова тінь: 1px 1px 0px # 283744;
У звичайному CSS, ми вибираємо дочірні елементи, спочатку націлюючи батьківського в кожному наборі правил, що є значно зайвим, якщо ми дотримуємося “Кращі практики” принцип.
У LESS CSS ми можемо спростити набори правил вкладання дочірніх елементів всередині батьків, наступним чином;
nav висота: 40px; ширина: 100%; фон: # 455868; кордон нижній: 2px твердотільний # 283744; li ширина: 600px; висота: 40px; a color: #fff; висота рядка: 40px; текстова тінь: 1px 1px 0px # 283744;
Можна також призначити псевдокласи, люблю : hover, у селектор, використовуючи символ амперсанда (&).
Припустимо, ми хочемо додати : hover на тезі прив'язки вище, ми можемо написати це так:
a color: #fff; висота рядка: 40px; текстова тінь: 1px 1px 0px # 283744; &: hover background-color: # 000; колір: #fff;
Операція
Ми також можемо виконувати операції в LESS, такі як складання, віднімання, множення і ділення до чисел, кольорів і змінних у таблиці стилів.
Скажімо, ми хочемо, щоб елемент B був у два рази вище, ніж елемент A. У такому випадку ми можемо написати це так:
@height: 100px .element-A висота: @height; .element-B висота: @height * 2;
Як ви можете бачити вище, спочатку зберігаємо значення в @height змінної, потім присвоїти значення елементу A.
У елементі B скоріше, ніж обчислювати висоту, ми можемо помножити висоту на 2 за допомогою оператора зірочки (*). Тепер, коли ми змінюємо значення в @height змінної, елемент В завжди буде в два рази більше висоти.
Ознайомтеся з більш досконалими прикладами роботи в нашому попередньому навчальному посібнику: Проектування смуги навігації меню.
Область застосування
LESS застосовує Область застосування концепція, де змінні будуть успадковані спочатку з локальної області, і коли вона недоступна локально, вона буде шукати через більш широку область.
header @color: чорний; фоновий колір: @color; nav @color: синій; фоновий колір: @color; a color: @color;
У наведеному вище прикладі заголовка має чорний колір фону, але navКолір фону буде синій оскільки вона має змінну @color у своїй локальній області, у той час як a також буде мати синій колір, який успадковується від свого ближчого батька, nav.
Заключна думка
Зрештою, ми сподіваємося, що ця посада може дати вам розуміння того, як ми можемо краще писати CSS, використовуючи LESS. Можливо, спочатку ви відчуваєте себе трохи незграбно, але, як ви спробуєте це частіше, це напевно стане набагато простішим.
Ось кілька підручників, які я рекомендую вам переглянути для подальших порад і практик, які допоможуть підштовхнути ваш МЕНЕ до майбутнього рівня.
- LESS CSS Підручник: Проектування смуги навігації меню
- Розуміння функцій кольору LESS
- 3 Нові функції CSS, які ви повинні знати
