How to use multiple Stylus in calc () variables?

Question

Everything is in the title. I cannot include multiple Stylus variables in the calc () CSS function.

I created the Sass code, I would convert myself under Stylus:

// *.scss

$gutter : 1rem;

.sizeXS-m10 {
    width: calc(#{100% / 12 * 10} - #{$gutter});
}

There is no problem for one variable:

// *.styl

$gutter = 1rem

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

Everything becomes more complicated when trying to integrate the results of this operation into a variable:

100% / 12 * 10

Answer 1

Just copy the values ​​in brackets, for example:

// *.styl

$gutter = 1rem

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

Answer 2

She put me on the track:

// *.styl

$gutter = 1rem

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

Answer 3

calc

/* .stylus */
.test1 
  $offset = 5px
  $mult = 3
  height calc(1em + $offset * $mult)

/* .css */
.test1 {
  height: calc(1em + $offset * $mult);
}

sprintf- %

/* .stylus */
.test2
  $offset = 5px
  $mult = 3
  height 'calc(1em + %s * %s)' % ($offset $mult)

/* .css */
.test2 {
  height: calc(1em + 5px * 3);
}

calc2() calc()

/* .stylus */
calc2($expr...)
  'calc(%s)' % $expr
.test3
  $offset = 5px
  $mult = 3
  height calc2(1em + $offset * $mult)

/* .css */
.test3 {
  height: calc(16em);
}

. , , sprintf

/* .stylus */
calc2($expr...)
  'calc(%s)' % $expr
.test4
  $offset = 5px
  $mult = 3
  height calc2(1em \+ $offset \* $mult)

/* .css */
.test4 {
  height: calc(1em + 5px * 3);
}

, calc2() mixin calc(),

/* .stylus */
calc($expr...)
  'calc(%s)' % $expr
.test5
  $offset = 5px
  $mult = 3
  height calc(1em \+ $offset \* $mult)

/* .css */
.test5 {
  height: calc(1em + 5px * 3);
}

, calc() case (, Case() CASE())

/* .stylus */
.test6
  $offset = 5px
  $mult = 3
  height Calc(1em \+ $offset \* $mult)

/* .css */
.test6 {
  height: Calc(1em + 5px * 3);
}