Как использовать переменные из scss файла в pug?

Для использования переменных из SCSS файла в Pug есть несколько способов.

Первый способ - использование глобальных переменных. Для этого в SCSS файле можно объявить переменную с помощью $ перед её названием. Например:

$primary-color: #FF0000;

После этого, в Pug файле можно использовать эту переменную, добавив в атрибуты нужного элемента = и вставив значение переменной внутри фигурных скобок:

div(style=`background-color: {${primary-color}};`)

Второй способ - использование SCSS функций. SCSS предоставляет много полезных функций, которые помогают в работе с переменными и значениями. Например, функция get-css-var() позволяет получить значение переменной CSS. В SCSS файле можно объявить переменную с помощью :root селектора, чтобы она стала доступна глобально:

:root {
  --primary-color: #FF0000;
}

Затем, в Pug файле можно использовать эту переменную, вызвав SCSS функцию get-css-var() и передав ей название переменной в качестве аргумента:

div(style=`background-color: #{get-css-var("primary-color")};`)

Третий способ - использование PostCSS. PostCSS является расширяемым инструментом для обработки CSS и его плагины могут предоставить дополнительные возможности, включая доступ к переменным в Pug.

Для начала, необходимо установить и настроить PostCSS. Затем, можно использовать его плагин, например postcss-simple-vars, чтобы использовать переменные в Pug. Допустим, в SCSS файле определена переменная:

$primary-color: #FF0000;

После этого, плагин PostCSS postcss-simple-vars будет достаточно умным, чтобы преобразовать SCSS переменные в CSS переменные. И в Pug файле можно использовать эти переменные:

div(style=`background-color: var(--primary-color);`)

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