使用SASS变量生成内联CSS

时间:2015-02-04 20:17:41

标签: html css sass gruntjs

我想知道你是否可以使用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,但听到一些想法会很好。

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

您还可以使用CSS变量

.box {
--difference: blue;
  background: red;
}
<div class="box">1</div>
<div class="box" style="background: var(--difference)">2</div>