Retrieve data from html to use with SCSS/CSS

Question

I have several different templates that use different background images. While I know I can inline the background image or create multiple classes to use different background images — I am trying to be creative while making my life easier. Here is what I am aiming for:

In the HTML div I would like to set a css var or data-attribute named background that holds the image name. So for example:

<div class="bg-image" style="--background: 'image-name'"></div>

or (which I don't think is possible)

<div class="bg-image" data-attr="image-name"></div>

Use that image name to do something like: Tried the following code and I know this does not work, I'm just seeing if something like this is possible.

// tried this
background-image: url("../images/"var(--background)".jpg");

// also tried this, which I think essentially does the same thing
@mixin form-bg-image($slug) {
  background-image: url("../images/#{$slug}.jpg");
}

.bg-image {
  @include form-bg-image(var(--background));
}

Not sure if this is possible without JS, I just think it would be cool to do! Looking for any solutions using SCSS and CSS.

You can get close with attr() but unfortunately support for anything other than content is sparse at the moment. With current browsers I believe you'll need some javascript. — Jon P
– Jon P, Commented Oct 15, 2019 at 0:56
its confusion as how you would do this during runtime? can you recompile scss after HTML is rendered? — Nidhin Joseph
– Nidhin Joseph, Commented Oct 15, 2019 at 0:58
CSS only? Not possible - there's no string concatenation except in the content property. You could do this pretty cleanly in SCSS, but it would still transpile to separate lines of CSS for each element/image. Also, your last SCSS example would not be possible because you're trying to apply a CSS variable (determined at browser runtime) into a SCSS mixin (which are resolved in development before CSS compilation). — Jon Uleis
– Jon Uleis, Commented Oct 15, 2019 at 2:18

mtk · Accepted Answer · 2019-10-15 10:48:04Z

1

Maybe you could have a SCSS dependency file with an array, that would map [data-attr=""] elements to background-image property. But that is probably not life made easier solution.

What SCSS -> CSS compiler do you use? If you wrap it in a grunt task runner, you can scan your html files for specific data attributes and include values into dependency before triggering compilation itself.

answered Oct 15, 2019 at 10:48

mtk

771 silver badge6 bronze badges

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

1 Comment

Jamie Over a year ago

Ah what a great idea!!

Collectives™ on Stack Overflow

Retrieve data from html to use with SCSS/CSS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related