CODEWITHSUNDEEP
sass
pmiranda
pmiranda

Reputation: 8470

Sass, create css class dynamic depending on data

I have this class:

.currency-flag-clp:before {
    background-image: url('~currency-flags/dist/square-flags/clp.svg');
}

I want to add that class dynamically to an html element, so I need to add a class like:

.currency-flag-XXXXX:before {
    background-image: url('~currency-flags/dist/square-flags/XXXXX.svg');
}

Is there a way with sass to do that? I don't want to define 270 class per value, I just want to create the class depending on my data.

Upvotes: 0

Views: 237

Answers (1)

Brebber
Brebber

Reputation: 3084

As you want to set an individual class on the element it seems you have access to your currency data when building the page. In that case there may be an alternative more simple approach without SASS.

(1) ALTERNATIVE (NON SASS) SOLUTION - maybe a simpler approach

(a) Write a css variable 'actual-currency-flag-url' for your actual flag-image to a style block in the head of your file based on the actual user setting/currency.

(b) Then use that variable to build the url-path in css.

// add to <head> of page:
// based on your data maybe you can do it by php
// note: don't use slashes when building url(...)

<style>
   :root { 
      --actual-currency-url: url(url-path/flag-[actualCurrency].jpg);
   }
</style>


// change class off html element
// from <div class="currency-flag-XXXXX"> to:

<div class="currency-flag">

// now you can do in your separate stylesheet file:
.currency-flag:before {
  background-image: var(--actual-currency-url);
}

Writing the style direct to the element is less elegant but works as well of course.

(2) POSSIBLE SASS SOLUTION - building 270 classes in SASS using a mixin

(a) Based on your data: generate a simple suffix-list and use it to build a SASS map with the suffixes of your flags.

(b) Use @each to build all 270 classes at once

// example code in SASS:

$flag-suffixes: (
    USD,
    AUD,
    EUR,
    //...
);

@each $suffix in $flag-suffixes {

    .currency-flag-#{$suffix}:before {
        background-image: url('~currency-flags/dist/square-flags/#{$suffix}.svg');
    }
}

Upvotes: 1

Related Questions