Как установить LESS? И воспользоваться им?

У вас есть 2 варианта

1. Установить через npm (лучше)
2. Встроить js «компилятор» в вашу страницу (хуже)

На время разработки советую просто вставить js файл, который я загрузил вам сверху. Далее если вы будете публиковать ваш .less файл, советую преобразовать его в .css через npm. Для установки надо прописать:

Установить npm для Windows  — https://nodejs.org/en/download/

(Кто Windows — игнорьте это) Для Linux —

yum -y install npm
apt-get -y install npm

Для Windows — Далее нажимаем WIN+R -> cmd -> и вбиваем сюда

npm install -g less

(для Всех) Далее, пишем ваш .less файл, и сохраняем допустим с названием styles.less и преобразуем его в styles.css

Не забывайте войти в папку где ваш .less файл для обеих систем — cd …путь (для Windows, смена диска E: или C:)

lessc styles.less styles.css

Поздравляю! Вы научились преобразовывать ваш .less => .css

Либо просто так для начала разработки:

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script type='text/javascript' src='.../less.min.js'></script> <!-- Здесь поставьте файл -->

less.min.js

В чём фишка LESS?

Фишка оч простая и крутая. В .css есть избыточность стилей. А говорят еще что SASS круче…

пример в .css

.css {
   font-size:8px;
}
.css .one {
   font-size: 10px;
}

Теперь рассмотрим пример на .less

.css {
   font-size:8px;
   .one {
      font-size:10px;
   }
}

Круче же? Не правда ли?) Я думаю — да. Но на этом фишки не заканчиваются… в LESS можно также создавать переменные

@var = 100px;
.css {
   width: @var;
}

Прикольно? Давайте еще разок…

@var = 100px;
.css {
   width: @var - 100px;
}

Отгадайте какой результат ширины у .css будет? Правильно. width: 0px;

Таким образом можно складывать, умножать, делить и прочее, и не только px, но и vh vw rem и прочие величины.

Еще можно указывать всякие псевдоклассы к классу

.css {
  &:after {
     ...
  }
  &:hover {
     ...
}

Также поддерживаются наши любимые комментарии

// Петь, я незнаю что это за стиль, может вообще его снести?

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