Есть ли способ запускать JS внутри SCSS или LESS?

В качестве сборщиков проектов, Gulp.js и его аналоги отлично подходят для автоматизации задач разработки, включая компиляцию CSS препроцессоров, таких как SCSS и LESS, в обычный CSS. Однако, по умолчанию Gulp.js не позволяет запускать JavaScript внутри SCSS или LESS.

Основная причина заключается в том, что SASS (старая версия SCSS) и LESS - это CSS препроцессоры, которые ориентированы исключительно на компиляцию CSS кода. Они не предназначены для выполнения JavaScript кода, так что запуск JavaScript внутри них не является стандартной или поддерживаемой функциональностью.

Однако, есть несколько способов, с помощью которых можно встроить или связать JavaScript код с SCSS или LESS.

Первый способ - использовать переменные SCSS или LESS, чтобы передавать значения из JavaScript кода. Создайте SCSS или LESS переменные и запишите их значения с помощью JavaScript на этапе выпуска или внутри событий, и эти значения будут доступны в SCSS или LESS коде во время компиляции. Например, вы можете создать переменную в SCSS:

$primary-color: #{$primary-color};

Затем, передайте значение из JavaScript:

var primaryColor = 'red';
document.documentElement.style.setProperty('--primary-color', primaryColor);

При компиляции SCSS переменная $primary-color будет иметь значение "red".

Второй способ - использовать SCSS или LESS для генерации собственных CSS с помощью JavaScript. В этом случае SCSS или LESS код будет использоваться для генерации CSS строк во время выполнения JavaScript кода. Например, вы можете использовать SCSS или LESS функции для создания динамических CSS классов или стилей.

var dynamicStyles = `
  $primary-color: red;
  .dynamic-class {
    color: $primary-color;
  }
`;

var css = Sass.compile(dynamicStyles);

// Применить сгенерированный CSS ко всем элементам с классом "dynamic-class"
var styleElem = document.createElement('style');
styleElem.innerHTML = css.text;
document.head.appendChild(styleElem);

Этот код использует библиотеку Sass.js для компиляции SCSS кода в CSS строку, которая затем вставляется в элемент <style> и применяется к элементам с классом "dynamic-class".

Но стоит иметь ввиду, что эти методы не являются стандартной или рекомендуемой практикой, так как противоречат нормам разделения задач и кодовой базы. Разделение CSS и JavaScript является распространенным и рекомендуемым подходом, поскольку оба языка имеют разные назначения и концепции.