Ускоряем процесс написания CSS с помощью LESS.

Итак, что же такое LESS и как с помощью LESS можно ускорить процесс написания CSS стилей для вашего проекта?

Less Как говорит нам ВикипедиЯ 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 разработчиков.

Лично мне он очень нравится. Но решать все равно Вам, использовать его или нет 😉