Работа с набором правил

Все те счастливчики, что используют Node.js знают, что без обратного вызова (от англ. callback) невозможно написать приложение. В Less роль функций обратного вызова в примесях берёт на себя набор правил (от англ. rule set — блок/набор правил).

Основная идея набора правил заключается в возможности присвоить переменной не только какое-то значение, но и целый блок кода, состоящий из свойств, селекторов и прочих интересностей.

На практике это выглядит следующим образом:

@element: {
  color: #777;

  &.active {
    color: #000;
  }
};

.item {
  @element();
}

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

.item {
  color: #777;
}
.item.active {
  color: #000;
}

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

Рассмотрим пример, иллюстрирующий преимущество использования набора правил.

Набор правил как функция обратного вызова

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

Представленный здесь код доступен как пример 3.7.1.

.screen(@min, @max, @ruleset) {
  @media (min-width: @min) and (max-width: (@max - 1)) {
    @ruleset();
  }
}

Теперь при вызове такой примеси ему нужно передать два размера экрана и набор правил. При компиляции вместо переменной @ruleset будут подставлены те значения, что были переданы при вызове в фигурных скобках.

.class {
  background-color: #000;

  .screen(768px, 1200px, {
    background-color: #fff;
  });
}

После компиляции получим следующий CSS-код:

.class {
  background-color: #000;
}
@media (min-width: 768px) and (max-width: 1199px) {
  .class {
    background-color: #fff;
  }
}

Для наглядности посмотрите на callback в JavaScript и сравните получившуюся у нас примесь с ним.

Объявление и вызов:

function mySandwich(param1, param2, callback) {
  console.log('Мой сэндвич включает в себя ' + param1 + ' и ' + param2 + '.');
  callback();
}

mySandwich('котлету', 'сыр', function() {
  console.log('А также соус, огурцы и прочие вкусняшки.');
});

В консоль выведется:

Мой сэндвич включает в себя котлету и сыр.
А также соус, огурцы и прочие вкусняшки.

Если посмотреть на функцию обратного вызова в Less и JavaScript, то несложно заметить их сходство. Для тех, кто знаком с Node.js — это поможет понять сущность набора правил в Less, благодаря проведению параллели между Less и JavaScript. Тем же, кто не знаком с JavaScript, есть куда стремиться.

Набор правил как область видимости

Представленный здесь код доступен как пример 3.7.2.

Обратите внимание на следующий код:

@variable: global;

@detached-ruleset: {
  variable: @variable;
};

selector {
  @detached-ruleset();
  @variable: value;
}

На первый взгляд свойство variable будет иметь значение value, так как здесь будет действовать правило ленивой загрузки переменных. Однако, так как мы имеет дело с набором правил, свойству будет присвоено значение global.

selector {
  variable: global;
}

Происходит это из-за того, что переменная @variable локальная для селектора selector, а переменная, содержащая вызов этой переменной объявлена глобально, следовательно, изначально поиск значения переменной будет происходить в глобальной области, а потом уже в локальной области.

Если же убрать глобальную переменную @variable:

@detached-ruleset: {
  variable: @variable;
};

selector {
  @detached-ruleset();
  @variable: value;
}

то значение будет браться от локальной переменной:

selector {
  variable: value
}

Другие интересные примеры применения области видимости, в случае использования набора правил, вы можете найти в официальной документации. Вызвано это тем, что они очень похожи друг на друга, а раздувать объяснение похожих примеров — не особо интересное занятие.

Мысли и советы

Не используйте переменные с набором правил как примеси. Машины созданы для того, чтобы ездить, а самолёты, чтобы летать.

Основная задача переменных с набором правил — передача свойств в примеси. Старайтесь использовать эту возможность именно так, и никак иначе.