Препроцессор LESS [Введение]

[ultra]

Что такое препроцессор LESS и зачем он нужен:
LESS — это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Для просмотра ссылки Войди или Зарегистрируйся, и, в свою очередь, оказал влияние на его новый синтаксис «SCSS», в котором также использован синтаксис, являющийся расширением css.
LESS — расширяет функциональность css, путем добавления переменных, миксинов, вложений, операторов и функций.

Почему вам нужно использовать LESS прямо сейчас:

• Элементарным примером является, возможность изменения макета на лету, при правильном использовании языка, вы сможете изменять различные, технические характеристики вашего лэйаута путем изменения одной переменной.
• Ускорение разработки в разы, а в умелых руках, в десятки раз.

На самом деле, каждый, кто использует LESS - преследует свои цели. Целей не так много, но вариантивное использование которых не позволяет однозначно определить их. Поэтому, оставлю возможность определить собственные цели, непосредтвенно вам самим.

Как начать использовать LESS:
В первую очередь нам понадобится компилятор. Я использую Gulp, но начинающим будет более удобен Prepros. Prepros - среди прочего, компилятор LESS с графическим интерфейсом.
Переходим на сайт Prepros и скачиваем бесплатную версию (trial) Для просмотра ссылки Войди или Зарегистрируйся . Затем устанавливаем.
После запуска Prepros, вам необходимо указать корневую директорию вашего проекта или просто перетащить ее в окно Prepros. Далее создайте файл css/style.less . Это все, компилятор настроен.
Выберите файл style.less в окне проекта и нажмите кнопку "Process file", рядом с файлом style.less скомпилируется style.css, который необходимо подключить в index.html
Теперь, при изменении style.less - Prepros автоматически скомпилирует его, в style.css

Осталось дело за малым - наполнить style.less. Поскольку less метаязык, валидный CSS будет валидным LESS синтаксисом, идентичным после компиляции.

Пример использования:

@bodyBg: #333;

.body{
 background-color: @bodyBg;
}

В этом примере, объявлена переменная "bodyBg" со значением #333.



Попробуйте и вы, объявить переменные и использовать их в своих примерах.

Вопросы, предложения, поправки, буду рад видеть в продолжении темы.
Писанина адаптирована специально для начинающих - минимум болтологии и сразу практика.

 

[Sunday]

А чем отличается такая запись

@bodyBg: #333;
.body{
background-color: @bodyBg;
}

от такой?

body{
background: #333;
}

В чём удобство?

 

[ultra]

А чем отличается такая запись

@bodyBg: #333;
.body{
background-color: @bodyBg;
}

от такой?

body{
background: #333;
}

В чём удобство?

это, можно сказать, азы
в данном конкретном случае, мы можем объявить переменную с цветом #333 и использовать ее, везде где нам нужен этот цвет
футер, хедер, цвет текста в контенте, цвет ссылок и другая добрая сотня мест, где так или иначе понадобилось использовать #333
магия начинается, после того, как приходят правки по макету и нужно изменить #333 на #000
изменяя одну переменную, вы автоматически влияете на те места, где она использована

 

[funnywheel]

В чём удобство?

Удобство в том, что у меня сейчас проект, который мы командой пилим 4-й месяц. На данный момент SASS-стилей уже овер 12к строк (а скомпиленного CSS далеко за 20)
И неделю назад клиент сказал - А че, давайте весь текст на сайте сделаем не просто черным, а темно-серым с небольшой синевой.
Если-бы я заранее себе в начале проекта не заготовил две переменных под черный ($color-dark и $color-text-dark) я бы сейчас офигел все вручную заменять. А так это решилось заменой 6 символов.

 

[ultra]

а вот и смешнойколясик, собственной персоной, который и порекомендовал мне использование Prepros, за что ему большое спасибо!