Using SASS variables to generate inline CSS

Question

I'm wanting to know if you can use SASS variables to generate inline CSS.

I'm aware you can do the following:

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

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

And then inline the CSS using a Grunt task which outputs:

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

But is it possible to use a variable:

$font-family: Arial, sans-serif;

In such a way:

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

Which would output:

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

I'm pretty sure you can't with basic SASS but it would good to hear some thoughts on it.

you might be interested in an html preprocessor jade-lang.com/reference/conditionals — Nitsan Baleli
– Nitsan Baleli, Commented Feb 4, 2015 at 20:23
That's similar to the Kit language: incident57.com/codekit/help.html#kit however I'd like to be able to control the whole process with SASS if at all possible. — abbas_arezoo
– abbas_arezoo, Commented Feb 4, 2015 at 20:25
Usually use inline CSS is not a very good thing. You can check this link webdesign.about.com/od/css/a/aa073106.htm . Maybe if you explain what you are trying to do becomes easier to help you. — Pedro Moreira
– Pedro Moreira, Commented Feb 4, 2015 at 23:08
Short answer, you can't. especially if it's for newsletter consider to simplify your code procedure since you already be aware of the painful email structure — evanzto
– evanzto, Commented Feb 5, 2015 at 14:05

SuperDJ · Accepted Answer · 2019-04-29 06:24:22Z

3

You can also use CSS variables

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

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

answered Apr 29, 2019 at 6:24

SuperDJ

7,69911 gold badges45 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jgranstrom · Accepted Answer · 2017-01-30 11:48:56Z

1

You can use a html preprocessor such as jade together with a tool like sass-extract to accomplish this.

Here is an example where you would get the result in your example.

style.scss

$fontFamily: Arial;

template.jade

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

index.js (could also be a grunt/gulp task)

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);

Outputs

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

answered Jan 30, 2017 at 11:48

jgranstrom

5865 silver badges13 bronze badges

Collectives™ on Stack Overflow

Using SASS variables to generate inline CSS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related