Как включить управляемые данными значения sass?

Question

Я хотел бы использовать SCSS для своего сайта. Однако это мультитенантный сайт, и я хотел бы, чтобы значения CSS были динамически генерируемыми (из базы данных) в зависимости от клиента. Я не хочу создавать отдельные файлы SCSS времени разработки для каждого клиента.

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

h1 {
    color: $h1FontColor$;
}

Однако я не могу этого сделать, поскольку процессор SCSS выдает ошибку, сообщающую, что expected value is invalid.

Есть ли способ обойти это? Можно ли сделать процессор более терпимым, чтобы пропускать эти заполнители?

Лучшее решение, которое я нашел на данный момент, - это обернуть значение в комментарии, которые затем можно использовать в качестве заполнителя. Хотя это немного громоздко и имеет недостаток в том, что он не работает, когда оборачивается вокруг переменных SASS, так как комментарий не копируется в скомпилированный CSS в правильных местах:

h1 {
    /* $h1FontColor$ */ color: red; /* $$ */
}

Answer 1

Мы нашли лучшее решение: Пользовательские свойства CSS . Просто обратитесь к свойству из файла SCSS. Мы по-прежнему предпочитаем использовать переменные SCSS, но это может быть ненужным - мы можем полностью их обойти, чтобы использовать вместо этого собственные пользовательские свойства CSS.

$primaryColour: var(--primary-colour);
$secondaryColour: var(--secondary-colour);
$fontColour: var(--font-colour);

SCSS без проблем компилируется с пользовательскими свойствами CSS, сохраненными в выходном CSS. Значения для свойств могут быть изменены во время выполнения. К сожалению, Internet Explorer не поддерживает пользовательские свойства, но мы используем css-vars-ponyfill для поддержки IE11.

Answer 2

Для этого я предлагаю компилировать и кэшировать ваш sass по запросу (на стороне сервера). Shopware использует аналогичный подход , генерирующий .less config и предоставляющий CSS по требованию.

Создайте файл переменных .scss, содержащий такие переменные, как $ h1FontColor, используйте его в файле main.scss и скомпилируйте ваши файлы с (в зависимости от вашего стека) node-sass-middleware для экспресс / nodejs-серверов или scssphp для PHP на лету.