Calculate a percent with SCSS/SASS
CssSassCss Problem Overview
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
Css Solutions
Solution 1 - Css
Have you tried the percentage function ?
$my_width: percentage(4/12);
div{
width: $my_width;
}
Solution 2 - Css
Another way:
$my_width: 4/12*100%;
div{
width: $my_width; // 33.33333%
}
Sass will output the value in %.
Solution 3 - Css
I was able to make it work this way:
div{
width: (4/12)* 1%;
}
This way you don't need to use any special function.
Solution 4 - Css
If you wanna use a loop, maybe this solution will be working
@for $i from 1 through 12 {
.col-#{$i} {
width: #{calc(100 * $i / 12) + '%'};
}
}