Everything is in the title. I can not incorporate several Stylus variables in the function CSS calc ().
I created a code Sass, I would convert myself under Stylus:
// *.scss
$gutter : 1rem;
.sizeXS-m10 {
width: calc(#{100% / 12 * 10} - #{$gutter});
}
For a single variable, no problem:
// *.styl
$gutter = 1rem
.sizeXS-m10
width 'calc(100% / 12 * 10 - %s)' % $gutter
Things get complicated when trying to integrate the results of this operation in a variable:
100% / 12 * 10
Just wrap the values into brackets, like this:
// *.styl
$gutter = 1rem
.sizeXS-m10
width 'calc(%s / %s * %s - %s)' % (100% 12 10 $gutter)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With