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

您可以使用 html 预处理器（例如jade）和sass-extract等工具来完成此操作。

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

样式.scss

$fontFamily: Arial;

模板.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>