使用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

您可以使用jade之类的html预处理器和sass-extract之类的工具来完成此任务。

这是一个示例，您可以在示例中获得结果。

style.scss

$fontFamily: Arial;

template.jade

div(style="font-family: #{$fontFamily.value};") Hello world

index.js（也可能是grunt / gulp任务）

const sassExtract = require('sass-extract');
const jade = require('jade');

const style = sassExtract.renderSync({ file: './style.scss' });
const html = jade.renderFile('./template.jade', style.vars.global);

console.log(html);

输出

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

Answer 2

您也可以使用CSS变量

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

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