Перейти к содержанию

Обзор возможностей

Одной из самых интересных особенностей препроцессора Less является то, что его создатели предусмотрели возможность исполнения JavaScript-кода в less-файлах. Казалось бы, это весомое преимущество и полная свобода действий, но не всё так просто.

Во-первых, JavaScript-код может быть лишь частью операции присвоения (переменные, свойства). Это означает, что введённая строка, содержащая JavaScript-код, будет интерпретироваться компилятором и обрабатываться.

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

  • Если возвращаемый результат число, то оно преобразуется к строке.
  • Если возвращаемый результат строка, то она заключается в кавычки.
  • Если возвращаемый результат массив, то все элементы массива конкатенируются и возвращаются как строка.
  • Если ни одно из выше перечисленных условий не работает, то результат просто приводится к строке.

Отсюда следует самое главное ограничение — результатом интерпретации выражения всегда будет строка.

Это очень сильно ограничивает возможность использования столь диковинной для CSS-препроцессора функции.

Так как же намекнуть компилятору о том, что перед ним не просто строка, содержащая JavaScript-код, а строка, которую следует интерпретировать? — очень просто:

@js: `выражение`;

Иногда может понадобиться избавиться от обрамляющих кавычек. Для этого применяется ранее рассмотренная тильда (~), позволяющая экранировать содержимое строки:

@js: ~`выражение`;

Достаточно всего лишь обернуть строку, код которой необходимо интерпретировать в апострофы.

Замечание

Не используйте точку с запятой перед закрывающим апострофом. В противном случае вы получите ошибку интерпретации.

Простейшие выражения

Простейшими, интерпретируемыми выражениями могут быть любые инструкции. Ниже я предлагаю рассмотреть некоторые из возможных JavaScript-инструкций, которые вы можете использовать в компиляторе Less.

Для начала компилятор может просто вернуть число или, допустим, массив:

.test-js {
  content: `1`;
  content: `[1, 2, 3]`;
}

// После компиляции
.test-js {
  content: 1;
  content: 1, 2, 3;
}

Заметьте, что массив был возвращён как строка, о чём и говорилось в самом начале.

Теперь посмотрим на то, что компилятор умеет складывать числа и даже считать математические функции:

.test-js {
  content: `1 + 6 + Math.cos(1) `;
}

// После компиляции
.test-js {
  content: 7.54030231;
}

Помимо каких-либо арифметических операций можно обращаться к методам Node.js, если вы компилируете код под этой платформой:

.test-js {
  content: `process.platform`;
}

Так как моей основной платформой пока ещё является Windows, то результат можно легко предугадать:

.test-js {
  content: 'win32';
}

Однако, никто не запрещает использовать JavaScript на полную в разумных пределах. В следующем примере выводится информация об используемой памяти процессом Node.js в байтах:

.test-js {
  content: `JSON.stringify(process.memoryUsage()) `;
}

// Компилируется в
.test-js {
  content: '{' rss ':23982080,' heapTotal ':15454976,' heapUsed ':8824096}';
}

Для особых ценителей уточню, что использовать require() здесь нельзя, поэтому поднять веб-сервер в less-файле нельзя. Зато можно писать функции:

.test-js {
  content: `(function() {var a = 2; var b = Math.pow(a, 4) ; return a + b;}) () `;
}

Результатом работы этого выражения будет число 18 (a = 2, b = 16), как несложно догадаться, преобразованное к строке:

.test-js {
  content: 18;
}