Препроцессоры CSS. Less.


Наверное, вы не раз ловили себя на мысли, что во время создания CSS-стилей для страницы вам часто приходится нарушать принцип DRY (Dont repeat yourself). Приходится повторять одно и тоже по нескольку раз: к примеру, вы выбрали цвет для выделения акцентов и теперь его требуется задавать для нескольких классов и элементов в разных местах. Или другой пример: вам нужно описать стили для нескольких вложенных друг в друга классов. Опять приходится повторять описание селекторов по нескольку раз?

Для решения данных проблем как раз и были придуманы препроцессоры CSS. Итак, что же они из себя представляют?

Препроцессор — это язык-надстройка, разметка на котором, в дальнейшем преобразуется в CSS.  Существует несколько препроцессоров для CSS:

  • LESS
  • SAAS
  • Stylus
  • и другие

Наиболее интересным, мне кажется, является именно LESS, так как его синтаксис наиболее близок языку CSS.

Вот основные возможности LESS:

  • Переменные
  • Примешивания (mixins)
  • Вложенные правила
  • Функции и операции

А теперь поподробнее об этих возможностях.

Переменные

Как и в других языках, переменные позволяют вам описать в одном месте какое-либо значение, а затем в коде использовать его повторно  когда потребуется. Благодаря переменным становится легче вносить модификации: вместо правки значения в нескольких местах, вы исправляете его в одном месте.

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

@color: #4D926F; #header { color: @color; } h2 { color: @color; }

В результате компиляции в CSS получится:

#header { color: #4D926F; } h2 { color: #4D926F; }

Примешивания (mixins)

Примешивания — это некоторый аналог функций в процедурных языках. С помощью mixins вы можете  включать все свойства класса целиком в другой класс. Кроме того, примешивания, как и обычные функции, могут иметь параметры:

.rounded-corners (@radius: 5px) {
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius; 
}
#header {
    .rounded-corners; 
}
#footer {
    .rounded-corners(10px); }

Вложенные правила

С помощью Less, вы можете сильно сократить запись нужных вам стилей, используя вложенные правила:

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

Функции и операции

В LESS вы можете использовать в качестве значений свойств не только константы, но даже выражения и функции! Вы можете производить арифметические операции, вызывать функции аналогично JS

@the-border: 1px; @base-color: #111; @red: #842210; #header { color: @base-color * 3; border-left: @the-border; border-right: @the-border * 2; } #footer { color: @base-color + #003300; border-color: desaturate(@red, 10%); }

Как начать использовать LESS?

Есть три варианта использования LESS:

  1. Использование на стороне клиента
  2. Использование на стороне сервера
  3. Предварительная компиляция в CSS

Клиент

Для использования на стороне клиента, вы подключаете сначала таблицу LESS-стилей следующим способом:

<link rel="stylesheet/less" type="text/css" href="styles.less">

ПОСЛЕ чего, вам необходимо подключить JavaScript-файл для компиляции LESS в CSS:

<script src="less.js" type="text/javascript"></script>

Сервер

Для компиляции LESS на стороне сервера, необходимо установить через менеджер пакетов Node пакет less:

 $ npm install less

после чего, вы можете вызывать компилятор LESS:

 var less = require('less'); less.render('.class { width: 1 + 1 }', function (e, css) { console.log(css); });

Предварительная компиляция

С помощью командной строки, вы можете заранее скомпилировать LESS-стили в CSS:

$ lessc styles.less > styles.css

и использовать непосредственно CSS-файлы.

Скачать LESS (JS), а также ознакомиться поподробней с этим препроцессором вы можете на русскоязычном сайте проекта


Наверх