使用 SASS 变量生成内联 CSS答案

【问题标题】：Using SASS variables to generate inline CSS使用 SASS 变量生成内联 CSS
【发布时间】：2015-04-04 12:31:42
【问题描述】：

我想知道您是否可以使用 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，但很高兴听到一些关于它的想法。

【问题讨论】：

您可能对 html 预处理器感兴趣 jade-lang.com/reference/conditionals
这类似于 Kit 语言：incident57.com/codekit/help.html#kit 但是如果可能的话，我希望能够使用 SASS 控制整个过程。
通常使用内联 CSS 并不是什么好事。您可以查看此链接webdesign.about.com/od/css/a/aa073106.htm。也许如果你解释你正在尝试做的事情会更容易帮助你。
@PedroMoreira 主要用于电子邮件通讯。
简答，你不能。特别是如果它是为了时事通讯考虑简化您的代码过程，因为您已经意识到痛苦的电子邮件结构

标签： html css sass gruntjs

【解决方案1】：

你也可以使用 CSS 变量

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

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

【讨论】：

【解决方案2】：

您可以使用诸如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>

【讨论】：