Работа с Less - slegarchik/slegarchik.github.io GitHub Wiki

Less - препроцессор CSS

Препроцессор -  это «программистский» подход к CSS. Они позволяют при написании стилей использовать свойственные языкам программирования приёмы и конструкции: переменные, вложенность, наследуемость, циклы, функции и математические операции. 

Возможности

https://less-lang.info/guide/

• Переменные @название_переменной: значение_переменной;

	@navy: #1d365d;

	background-color: @navy;
        color: @navy;
        border-color: @navy;

Переменные можно задавать как снаружи правил, так и внутри - глобальные/локальные переменные

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

	.super-class-name {
           color: #ffffff;
           a {
               text-decoration: none;
               span { font-size: 1em; }
           }
        }

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

	.super-class-name { color: #ffffff; }
        .super-class-name a { text-decoration: none; }
        .super-class-name a span { font-size: 1em; }

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

	.super-button {
           &-red { color: red; }
           &-blue { color: blue; }
        }

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

	.super-button-red { color: red; }
        .super-button-blue { color: blue; }

• Миксины (примеси) - позволяют добавить перечень свойств от одного набора к другому набору

	.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; }
	#menu a { color: #111; .**bordered**; }
        .post a { color: red; .bordered; }

• Математические операции сложения, вычитания, умножения или деления

Единицы измерения берутся от первого параметра в выражении

• Escaping (экранирование)

С помощью ~"anything" или ~'anything' позволяют использовать любую произвольную строку, как свойство или значение переменной

• Поддержка функций - https://less-lang.info/functions/

Установка и настройка Less в VsCode

https://code.visualstudio.com/docs/languages/css#_transpiling-sass-and-less-into-css

1. Устанавливаем Node.js

2. Через терминал VsCode устанавливаем модуль less npm install -g less

3. Настраиваем компиляцию less-файла в css-файл

   Ctrl+Shift+P > Tasks > Configure Tasks > Create tasks.json (Others)

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Less",
            "type": "shell",
            "command": "lessc less/style.less css/style.css",
            "group": "build"
        }
    ]
}

4. Создаем файл style.less в папке less
5. Для компиляции (обновления) less/style.less в css/style.css выполняем Ctrl+Shift+B