styluscalc

How to use multiple variables Stylus in calc()?

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
Solution

  • Just wrap the values into brackets, like this:

    // *.styl

$gutter = 1rem

.sizeXS-m10
  width 'calc(%s / %s * %s - %s)' % (100% 12 10 $gutter)