Урок 5. Переменные в Less

2.06.2019 Нет комментариев 850

Привет! Сегодня говорим о переменных Less.

У вас должен быть установлен Nodejs и глобально npm.

Довольно часто можно видеть одно и то же значение, повторяющееся много раз по вашим таблицам стилей: 

a,
.link {
  color: #428bca;
}
.widget {
  color: #fff;
  background: #428bca;
}

Переменные упрощают поддержку вашего кода, предоставляя возможность управлять этими значениями из одного места.

Давайте создадим переменную @color: #000000;

@ — знаком собачки обозначается переменная, дальше нужно придумать её название. Хорошим тоном считается называть переменные, соответствующие ее смыслу. Например, @color для цвета текста.
Далее, как в CSS, ставится двоеточие и значение переменной, а в конце точка с запятой.

Название переменной может быть составным, из двух частей.
В программировании есть понятие именования переменных в стиле CamelCase («ВерблюжийРегистр», также «ГорбатыйРегистр», «СтильВерблюда»), когда несколько слов пишутся слитно без пробелов, при этом каждое слово внутри фразы пишется с прописной буквы.
Стиль получил название CamelCase, поскольку прописные буквы внутри слова напоминают горбы верблюда (англ. Camel).

Также, встречается lowerCamelCase, где внутри фразы с прописной пишутся все слова, кроме первого. Тогда первая часть пишется с маленькой буквы, а вторая — с большой.

Для Less подходит стиль lowerCamelCase. Мы можем назвать нашу переменную @fontColor для задания цвета тексту.

Для работы нужно запустить gulp из консоли командой gulp.

Из предыдущего урока у нас есть index.html с небольшой разметкой:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="bundle.min.css">
</head>
<body>
  <h1>Привет, GULP!</h1>
  <div class="text">
    Сейчас обновится..
  </div>
</body>
</html>

В index.less напишем стили:

@color: green;
@fontColor: #000000;
@fontSize: 24px;

body {
  background: @color;
}

.text {
  color: @fontColor;
  font-size: @fontSize;
}

и посмотрим результат:

компиляция переменных

В bundle.min.css будет такой результат:

body {
  background: green;
}

.text {
  color: #000000;
  font-size: 24px;
}

Манипуляции с переменными

Сделаем background темнее, напишем в index.less:
@darkenBg: darken(@color, 15%);

Видим в bundle.min.css следующий код:

body {
   background: #003400;
 }
darken

Сделаем подстановку селектора

Cоздаем класс и id с названием text, но уже через переменную @selector

@selector: text;

.@{selector} {
  background: #ffffff;
}

#@{selector} {
  color: red;
}

@selector — переменная
{} — в фигурных скобках указываем переменную, из которой берем значение

переменная selector и подстановка ее значения в классах

Можно подставлять значение переменной и в названия селектора

Создаем переменную @field: color;
В фигурных скобках подставляем ее в необходимые места: 

@field: color;

.@{selector} {
  background-@{field}: #ffffff;
}

#@{selector} {
  @{field}: red;
}

На выходе в bundle.min.css получаем то же самое (см. скрин выше).

Использование переменной по ссылке

@color: blue;
@field: 'color'; /* в кавычках - используем строковое значение переменной для подстановки  */

@newVar: @@field; /* сначала в @field подставляется 'color' и получается переменная @color */

.text {
  color: @newVar;
}

Смотрим, как применяется значение переменной:

переменная по ссылке

Область видимости переменных

@scope: 1; // переменная задана глобально

.text {
  @scope: 2; // локальная переменная
  .text2 {
    @scope: 3;
    value: @scope;
    @scope: 4;
  }
  value: @scope;
}

Несмотря на то, что есть глобальная переменная @scope, внутри класса .text используется локальная одноименная переменная.
Именно ее значение будет использоваться для .text

Создадим еще один класс .text3

.text3 {
  value: @scope;
}

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

глобальные и локальные переменные

Еще сами свойства можно использовать как переменные:

.test {
   color: #cccccc;
   background-color: $color;
 }

Компилируется в:

.test {
   color: #cccccc;
   background-color: #cccccc;
 }

Также читайте в документации про свойства в качестве переменных

И также все разделы документации о переменных

При написании статьи использовались материалы WebForMySelf.com

Голосов: 0, Средняя оценка: 0
Top