Обзор возможностей¶
Одной из самых интересных особенностей препроцессора 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;
}