Блог

В моем приложении есть настройка Sass, которая предоставляет некоторые пользовательские свойства, а также Sass $variables .

 :root { --my-variable: #FFFFFF; }

$my-variable: var(--my-variable) !defau<
  

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

Например:

 :export {
  myVar: var(--my-variable)
  ...
}
  

Но единственное, чего я смог добиться, это то, что в Js я получаю строковый литерал, а не значение, связанное с переменной, в данном случае #FFFFFF .

Нужно ли мне делать что-то конкретное в моей конфигурации, чтобы это произошло?

Это связано с тем, что только браузеры могут интерпретировать пользовательские свойства. Если пользовательское свойство объявлено следующим образом:

 :root { --body-backgroundColor: #fafafa; }

body { background-color: var(--body-backgroundColor); }
  

Вы можете манипулировать --body-backgroundColor: с помощью Js, однако Sass будет интерпретировать вашу $my-variable: var(--my-variable) !defau< переменную как строку, поскольку она не может связать пользовательское свойство со своим значением.

Здесь лучше всего передавать переменную внутри настраиваемого свойства.

 $myVar: #fff !defau<

:root { --my-var: #{$myVar}; }

body { background-color: var(--my-var); }

:export {
  myVar: $myVar;
  ...
}