Как расширение CSS, Less, не только полностью обратно совместим с CSS, но также добавляет в него новые возможности, не меняя стандартного синтаксиса. Это делает обучение Less простым, и позволяет Вам использовать только привычный CSS.

Переменные

Работать с ними очень просто:

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

После компиляции, получим:

#header {
  color: #6c94be;
}

На заметку, переменная - это константа, которая может быть определена лишь единожды.

Миксины(примеси)

Миксины(примеси) позволяют добавить перечень свойств от одного набора к другому набору. Говоря об этом, у нас выходит такой пример с классом:

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

И, если мы хотим поместить набор свойст внутрь других, мы просто пишем имя класса, там где мы хотим их разместить, как показанно ниже:

#menu a {
  color: #111;
  .bordered;
}

.post a {
  color: red;
  .bordered;
}

Свойства класса .bordered, после компиляции появятся в обеих селекторах #menu a и .post a. (Заметье, что Вы также можете использовать #ids для создания миксина(примеси).)

Вложенности

Less дает возможность использовать вложенности вместо или в сочетании со стилями. Давайте представим, что у нас есть следующий CSS код:

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

В Less, мы можем написать подобным образом:

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

Полученный код является более кратким, гибким, иерархично структурированным, и имитирует структуру HTML.

Кроме того, можно связать псевдо-селекторы с миксинами(примеси) с помощью этого метода. Здесь, классический clearfix хак, переписанный как миксин (& указывает на текущий родительский селектор):

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

Вложености, директивы и всплытия

Такие директивы, как media или keyframe могут быть вложены, таким же способом, как и обычные селекторы.

Директивы условий, такие как @Media, @supports и @document также имеют селекторы, копируемые в них:

.screen-color {
  @media screen {
    color: green;
    @media (min-width: 768px) {
      color: red;
    }
  }
  @media tv {
    color: black;
  }
}

на выходе получим:

@media screen {
  .screen-color {
    color: green;
  }
}
@media screen and (min-width: 768px) {
  .screen-color {
    color: red;
  }
}
@media tv {
  .screen-color {
    color: black;
  }
}

Оставшиеся, без условные директивы, такие как font-face или keyframes, будут работать также. Их содержимое не изменится:

#a {
  color: blue;
  @font-face {
    src: made-up-url;
  }
  padding: 2 2 2 2;
}

после компилирования:

#a {
  color: blue;
}
@font-face {
  src: made-up-url;
}
#a {
  padding: 2 2 2 2;
}

Математические операторы

Математические операторы +, -, *, / могут быть применены к любым числам, цветам или переменным. Если это возможно, математические операторы конвертируются, перед сложением, вычитанием или сравнением. Если преобразование невозможно или не имеет смысла, единицы измерения игнорируются. Примеры невозможных конвертаций: px в cm или rad в %.

// numbers are converted into the same units
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // result is 4px

// example with variables
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%

Умножение и деление не преобразовывают числа. В этом нету необходимости в большинстве случаев - длина умножается на длину, дает область и CSS не поддерживает подобных областей. Less будет работать с числами, как они есть, и явно указывать новый тип значения в результате.

@base: 2cm * 3mm; // result is 6cm

Цвета делятся по RGB(red, green, blue) палитре и RGBA (c alpha прозрачностью). Опреции вычисления применяются к каждому цвету отдельно. Если пользователь добавил два цвета, то зеленый размер результата равен сумме зеленых размеров входных цветов. Если пользователь умножает цвет на число, каждое измерение цвета(RGB) будет умноженно.

Замечание: арифметические операции на велечину альфа(прозрачность), не опредены, потому что большинство математических операций на цвета, не имеют стандартной договоренности значений. Но, не следует полагаться на текущую версию Less, так как, это может измениться в последующих версиях.

Вычисления с цветом, всегда дает правильный цвет. Если какой-то цвет в результате вычисления равен больше, чем ff или меньше чем 00, размер округляется до ff либо 00. Если альфа прозрачность в резульате больше, чем 1.0 или меньше 0.0, прозрачность округляется до 1.0 или 0.0.

@color: #224488 / 2; //results in #112244
background-color: #112244 + #111; // result is #223355

Escaping

Escaping позволяют Вам использовать любую произвольную строку, как свойство или значение переменной. Абсолютно все внутри ~"anything" или ~'anything' используется без изменений, кроме необходимости интерполирования.

.weird-element {
  content: ~"^//* some horrible but needed css hack";
}

результат:

.weird-element {
  content: ^//* some horrible but needed css hack;
}

Функции

Less предоставляет пользователю огромный набор предопределенных функций, для работы над цветами, строками и математическими операциями. Со всем их множеством можно ознакомиться в разделе Функции Less.

Использовать их действительно просто. Следующий пример показывает, как использовать конвертацию в проценты, увеличить базовое насыщение цвета в 5% и затем устанавить цвет фона на тот, который осветляется на 25% и вращается на 8 градусов:

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

Пространства имен и аксессоры

(Не стоит путать с CSS @namespace или пространством имен селекторов).

Иногда, возможно у Вас возникало желание сгрупировать ваши миксины, по каким-либо критериям или просто, для инкапсуляции. Это действительно можно сделать в Less, сказав, что вы хотите объединить несколько миксинов и переменных под #bundle, для последующего повторного использования или распределения:

#bundle {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white
    }
  }
  .tab { ... }
  .citation { ... }
}

Сейчас, если мы хотим применить миксин к .button классу в нашем #header a, мы, просто можем сделать так:

#header a {
  color: orange;
  #bundle > .button;
}

Приминте во внимание, что переменные, обьявленные внутри пространства имен будут в области видомости только этого пространства имен и не будут доступны из вне пространства(scope) используя тот же синтаксис, что и к миксинам (#Namespace > .mixin-name). Так, например, Вы не можете сделать следующее: (#Namespace > @this-will-not-work).

Область видимости(Scope)

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

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

Переменные и Примеси не должны быть объявлены перед использованием, поэтому следующий Less код идентичен предыдущему примеру:

@var: red;

#page {
  #header {
    color: @var; // white
  }
  @var: white;
}

Комментарии

Доступны оба варианта написания комментариев, как множественные, так и единичные:

/* One hell of a block
style comment! */
@var: red;

// Get in line!
@var: white;

Импорт

Работа импорта осуществляется, в значительной мере, как и ожидалось. Вы можете импортировать .less файл, и все переменные обявленные в нем, будут доступны к использованию. Расширение .less необязательно указывать для файлов.

@import "library"; // library.less
@import "typo.css";