До LESS, CSS мог вызвать сильное разочарование при написании свойств, особенно когда дело доходило до серьезных проектов с тысячами строк кода. Вам приходилось дублировать одни и те же правила, с помощью поиска вашего редактора находить и изменять в разных местах цвет, или еще что-нибудь.
К счастью, сообщество веб-разработчиков решила эту проблему. Теперь у нас есть такие CSS препроцессоры, как Less, Sass и Stylus. Они дают нам ряд преимуществ по сравнению с обычной CSS:
- Переменные, благодаря которым вы сможете определить и легко изменять значения CSS свойств)
- Динамически вычисляемые значения (в CSS мы недавно получили свойство calc).
- Примеси, которые позволяют повторно использовать и комбинировать стили. Они даже поддерживают passing аргументы.
- Функции, которые дают вам ряд полезных утилит для работы с цветом, конвертирования изображений в data-uri и д.р.
Негативный аспект заключается в том, что если вы используете один из процессоров, вам нужно будет скомпилировать обычный CSS файл со стилями, чтобы он работал в браузерах.
1. Установка LESS
Препроцессор Less написан на JavaScript и для работы с ним вам потребуется либо Node.js, либо веб-браузер для запуска. Вы можете подключить less.js на вашем веб-сайте, или скомпилировать все связанные .less стили в режиме реального времени, но это медленно и не рекомендуется. Рекомендуемый способ заключается в компиляции ваших .less стилей в обычный файл CSS для продакшена. Есть ряд бесплатных графических программ, которые могут компилировать .less файлы для вас, но в этой статье мы будем пользоваться Node.js.
Если вы уже установили Node.js, то откройте терминал и установите Less с помощью npm:
npm install -g less
Это даст вам доступ к команде lessc из любого открытого терминала, что позволит везде компилировать ваши .less файлы в CSS:
lessc styles.less > styles.css
В результате (если не было ошибок при компиляции) ваш код будет преобразован в обычный CSS, находящийся в файле styles.css. Все, что осталось, - это подключить полученный CSS файл к HTML странице.
2. Переменные
Одной из главных особенностей Less является возможность создавать переменные, как в обычном языке программирования. Они могут хранить значения любого типа, которые вам потребуется часто использовать: цвета, размеры, селекторовы, имена шрифтов, URL, и так далее. Философия этого препроцессора - повторное использование CSS синтаксиса там, где это возможно.
Здесь мы определяем две переменные, содержащие шестнадцатеричные коды: одну для цвета фона и одну для цвета текста. Попереключайтесь между вкладками, чтобы увидеть как Less трансформируется в CSS:
В приведенном выше примере, цвет фона белый, в то время как текст темный. Если, скажем, мы хотим сделать все наоборот, нам достаточно будет просто изменить значения переменных, а не вручную менять каждое вхождение.
Подробнее о переменных вы можете узнать, изучив Использование переменных в LESS. Секреты LESS-переменных.
3. Примеси
LESS позволяет использовать существующий класс, или идентификаторы и применять все их стили непосредственно к другому селектору. Следующий пример внесет ясность:
Подробнее о примесях вы можете узнать, изучив Использование примесей в LESS. Для чего в LESS нужны примеси.
4. Вложенности и Области видимости
Вложенности можно использовать для структурирования таблицы стилей способом, который совпадает с HTML-структурой страницы, снижая вероятность ошибок и конфликтов Вот пример для неупорядоченного списка и его детей:
Так же, как в языках программирования, в Less переменные получают свои значения в зависимости от области видимости. Если значение не указано в конкретной области, LESS будет искать его в верхних блоках до тех пор, пока не найдет ближайшее.
Будучи переведенным на CSS, текст нашего li будет окрашенным, поскольку мы предопределили @text-color
в правилах ul rules.
Узнать об этом больше можно в Области видимости.
5. Операции
Вы можете сделать основные арифметические операции для числовых значений и цветов. Допустим, мы хотим, чтобы у двух элементов div, размещенных рядом друг с другом, второй был в два раза шире первого и с другим фоном. LESS знает, что такое единицы измерения и не будет их смешивать.
6. Функции
LESS также имеет свои функции! Давайте взглянем на функцию fadeout, которая уменьшается непрозрачность цвета:
В этом случае, когда мы наводим мышь на div, он становится полупрозрачным, что облегчает навигацию. Есть много других полезных функций для манипулирования цветом, определения размера изображений и даже даже вставку ассетов в таблицы стилей. Смотрите здесь полный список функций LESS.
На этом наша 10-минутка закончилась и вы уже неплохо разбираетель в препроцессоре LESS).