Основы less

2
image-384

Less это препроцессор CSS, расширяющий его следующими плюшками:

  • Переменные
  • Примеси
  • Вложенные правила
  • Функции и операции
  • и др. возможности

 

Установка

Для установки понадобится node.js, а точнее его менеджер пакетов npm.

Запускаем командную строку:

npm install -g less

Установка завершена.

 

Использование

Есть два способа использовать less. Первый я использую в процессе разработки:

Подключаем наш файл less

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

Затем подключаем less.js для компиляции, он доступен здесь

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

Этот способ удобен тем что не надо каждый раз компилировать отдельно less файл в css, все работу делает компилятор автоматически при перезагрузке. Но когда проект завершен это не очень удобно, по этому компилируем less в css в командной строке:

lessc styles.less > styles.css

И подключаем css файл к нашему проекту.

Основные возможности less

less так как расширяет css то в нем само собой доступен весь его функционал. Но важнее то что мы получаем когда начинаtм использовать less

Переменные

Переменные в less — это константы которые задаются один раз.

@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;
}

Это значительно сокращает наш код и облегчает его изменение и доработку.

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

Вложенные правила дают нам возможность использовать вложения вместо или в сочетании с каскадными таблицами. Скажем у нас есть 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 файла.

Операции

Любое количество цвета или переменных может быть прооперировано. Вот несколько примеров:

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;
color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

Функции

У less есть много функций, которые трансформируют цвета, работают со строками и числами.

Работать с ними очень просто. Следующий пример использует процент, чтобы преобразовать от 0,5 до 50%, повышает насыщенность базового цвета на 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);
}

Заключение

Здесь только часть возможностей которые доступны в less. Полный список и все обновления можно посмотреть на официальном сайте less. В начале кому то может показаться это сложным или абсолютно не нужным, но на самом деле потратив совсем немного времени даже на не его изучение, он не так сложен что бы долго его учить, а на привыкание работать с ним, вы значительно ускорите и облегчите свою работу.