html - 使用 SASS 变量生成内联 CSS

Question

我想知道您是否可以使用 SASS 变量生成内联 CSS。

我知道您可以执行以下操作:

$my-class: yellow;
$yellow: #ffff00;

.#{$my-class} {
    color: $yellow;
}

然后使用输出的 Grunt 任务内联 CSS:

<div class="yellow" style="color: #ffff000;">Hello world</div> 

但是否可以使用变量:

$font-family: Arial, sans-serif;

以这样的方式:

<div style="font-family: $font-family;">Hello world</div>

哪个会输出:

<div class="font-family: Arial, sans-serif;">Hello world</div>

我很确定你不能使用基本的 SASS，但很高兴听到一些关于它的想法。

Answer 1

你也可以使用 CSS 变量

.box {
--difference: blue;
  background: red;
}

<div class="box">1</div>
<div class="box" style="background: var(--difference)">2</div>