CODEWITHSUNDEEP
sass
S0me0neRand0m
S0me0neRand0m

Reputation: 61

Can i make my classname variable in sass?

Is it possible to make a classname variable in sass. If so how can i do the following:

$colorlist();

$blue:    #007bff;
$yellow:  #99s9e0;
$red:  #f4i304;

$colorlist: map-merge((
 "blue":   $blue,
 "yellow":  $yellow,
 "red":     $red,
)
$colorlist
);

now i want to write in HTML class:"bg-blue" bg is a class that gives the element a background color defined by the color after the '-' sign.

currently i have this:

$red:  #900;
$colorlist();
$colorlist: map-merge(
                (
                       "color1": $red,
                ),
                $colorlist
);


.bg-#{$colorlist} {
  background-color: $colorlist;
}

with suggestion of ReSedano

$red:  #900;
$colorlist();
$color();
$colorlist: map-merge(
                (
                       "color1": $red,
                ),
                $colorlist
);


.backg-#{$color} {
  background-color: map_get($colorlist,$color);
}

Upvotes: 0

Views: 1618

Answers (1)

ReSedano
ReSedano

Reputation: 5060

Try this way: 

$red:  #900;
$colorlist:();
$color:();
$colorlist: map-merge(
   (
      red: $red,
    ),
  $colorlist
);

@mixin background($color){
  .backg-#{$color} {
    background-color: map-get($colorlist,$color);
  }
}


@include background(red);

Your output will be this:

.backg-red {
  background-color: #900;
}

Upvotes: 1

Related Questions