Прискорюємо процес написання CSS за допомогою LESS.

Отже, що ж таке LESS і як за допомогою LESS можна прискорити процес написання CSS стилів для вашого проекту?

Як говорить нам Вікіпедія LESS – це динамічний мову стилів, який розробив Alexis Sellier. Він створений під впливом мови стилів Sass, і, в свою чергу, вплинув на його новий синтаксис «SCSS», в якому також використаний синтаксис, який є розширенням CSS.

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

Більш розширений опис можливостей LESS.

Змінні

За допомогою змінних досить легко домогтися глобальних змін на сайті. Наприклад створення колірних схем. Все досить просто. В одному місці визначаємо глобальну змінну, присвоюємо їй значення і потім використовуємо по всьому LESS.

Наприклад

@color: #4D926F;

header {
  color: @color;
}
h2 {
  color: @color;
}
p {
  color: @color;
}

І так далі.

Mixins

Mixins якщо пояснити простими словами то це ті ж змінні тільки для класів. Тобто ви для певного класу задаєте певні css властивості і використовуєте цей клас в подальшому як змінну.

Наприклад обрізка кутів за допомогою css3:

В CSS це виглядає наступним чином:

header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

У LESS можна створити наступний mixin:

.corners (@radius: 3px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

І використовувати його в LESS в будь-якому місці додаючи в якості параметра потрібний нам радіус заокруглення. Наприклад в нашому випадку це буде виглядати так:

header{
  .corners(5px);
}

Якщо параметр не ввести а написати просто:

header{
  .corners();
}

то радіус буде 3px (за умовчанням установлюється)

Вкладеність правил

Дуже корисне і зручне властивість LESS це вкладеність правил.

Приклад з LESS:

header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

Отриманий CSS:

header h1 {
  font-size: 26px;
  font-weight: bold;
}
header p {
  font-size: 12px;
}
header p a {
  text-decoration: none;
}
header p a:hover {
  border-width: 1px;
}

Дуже зручно особливо при створенні багаторівневих меню, ніколи не загубишся і не помилишся з успадкуванням.

Функції та операції

Ідея функцій і операцій дуже проста:

@unit: 3px;

.button{
    border:@unit solid #ddd;
    padding: @unit * 3;
    margin: @unit * 2;
}

У вище наведеному коді ми задаємо змінної @unit значення рівне 3px. Потім для .button ми встановлюємо це значення в ширину рамки, відступи в три рази більше цієї ширини, а поля в два рази.

Можна використовувати операції множення, ділення, додавання і віднімання.

Ці ж операції можна проводити і з квітами. до одного кольору додати інший і т.п.

Приклад:

button {
    background: #941f1f + #222222;
    border: #941f1f - #111111;
}

Все це і є основними можливостями LESS, які в рази збільшують швидкість написання CSS коду. LESS дуже актуальний для великих проектів які роблять кілька frontend розробників.

Особисто мені він дуже подобається. Але вирішувати все одно Вам, використовувати його чи ні 😉