Calculate a percent with SCSS/SASS Ask Question

Calculate a percent with SCSS/SASS Ask Question

I want to set a width in percentage in scss via calculation, but it gives me errors..

Invalid CSS after "...-width: (4/12)%": expected expression (e.g. 1px, bold), was ";"

I want to do something like

$my_width: (4/12)%;

div{
width: $my_width;
}

how do I add the % sign in there?

Same question with px and em

ベストアンサー1

Have you tried the percentage function ?

$my_width: percentage(4/12);
div{
    width: $my_width;
}

UPDATE

This function was updated since version 1.33.0 and now this is a correct method to do it:

@use "sass:math";

div {
    width: math.percentage(math.div(4,12));
}

Source: https://sass-lang.com/documentation/modules/math#percentage

おすすめ記事