Изучение LESS пременных - Блог Фронтендера

CSS-препроцессор LESS: Переменные (Урок 3)

Список уроков по данной теме:

LESS переменные:

Все препроцессоры CSS, так же как и языки программирования, имеют очень удобный инструмент — переменные.
И LESS не исключение.

1. Создание переменных

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

@name: value;


где:

@ — объявление переменной,

name — имя переменной (его вы придумываете сами),

value — значение переменной (любое значение css свойства)

Данный синтаксис по структуре напоминает css свойтсва. Вот примеры реальных less переменных:

@bluesky: rgb(44, 189, 252);

@center: 0 auto 0 auto;

@roboto: "Roboto", sans-serif;

2. Использование переменных

Переменные удобны тем, что позволяют менять все заданные свойства за один раз.

Допустим вы создаёте сайт и хотите протестировать разные цветовые решения и поигратся с отступами

Создадим небольшой HTML элемент, это будет обычный список

<ul>
  <li>Пример</li>
  <li>Пример</li>
  <li>Пример</li>
</ul>

Теперь создадим переменные, которые мы в дальнейшем хотим изменять.

В данном случае это будет цвет текста color и отступ списка padding-left

@blue: #2cbdfc;

@padLeft: 20px;

Теперь создадим стили для нашего HTML элемента с уже созданными переменными

ul {
  padding-left: @padLeft;
  list-style: square;
}


li {
  color: @blue;
}

У нас получился такой список:

  • Пример
  • Пример
  • Пример

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

@blue: #006895;

@padLeft: 55px;

Готово, больше ничего менять не надо, теперь достаточно скомпилировать less код в css, и наш список примет изменённый вид:

  • Пример
  • Пример
  • Пример

В нашем случае у нас всего лишь один элемент и задать ему значения можно было без переменных.

Но представьте, что у вас на странице есть: списки, ссылки, рамки и т.д.
Все это вы хотите сделать одним цветом. Тут то и пригодится переменная, ведь для того что бы поменять цвет у всех элементов, достаточно будет один раз изменить переменную.

Например:

@color: red; a {
 color: @color
}

button {
 border: 1px solid @color;
}

div {
 background-color: @color;
}

Теперь меняем лишь значение переменной и из красных элементов, делаем синие:

@color: blue;

Готово!

Поздравляю, вы узнали как пользоваться LESS переменными!

Последний совет: всегда давайте переменным понятные имена.