CODEWITHSUNDEEP
csssass
Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35973

Make product of variable in sass/scss

I need to make a product between two variable in sass/scss. But when I see the compiled file I see that:

h1 {
    font-size: 2em * 1em;
  }

This is the code that generate it:

$h1: 2em;
@mixin setHeadingFont($smartphonePortraitFontSize:1em) {
    h1 {
        font-size: #{($h1 * #{$smartphonePortraitFontSize})};
    }

@include setHeadingFont();

I have also tried:

font-size: #{(#{$h1} * #{$smartphonePortraitFontSize})};

or

font-size: #{($h1 * $smartphonePortraitFontSize)};

or

font-size: $h1 * $smartphonePortraitFontSize;

or

font-size: #{$h1} * #{$smartphonePortraitFontSize};

how can I solve it?

Thanks

Upvotes: 0

Views: 131

Answers (1)

Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35973

I have find the question if someone are interested to it:

@function removeUnit($num) {
    @return ($num / ($num * 0 + 1));
}

@function getUnit($num){
    @return (unit($num));
}

$unit_num: getUnit($smartphonePortraitFontSize);
h1 {
     font-size: (removeUnit($h1) * removeUnit($smartphonePortraitFontSize))#{$unit_num};
}

Upvotes: 1

Related Questions