How to use multiple variables Stylus in calc()?

Question

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

Mayan

Answer 1

Just wrap the values into brackets, like this:

// *.styl

$gutter = 1rem

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

Mages

Answer 2

She put me on the track:

// *.styl

$gutter = 1rem

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

Mayan

Answer 3

Stylus escape all the content of calc function

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

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

so you can use sprintf-like operator % but it's not realy easy te read

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

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

you can create a calc2() mixin that use calc() but stylus will try to do the operation

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

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

so you have to escape all operators. i think it's more readable than sprintf syntax

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

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

if you want you can rename the calc2() mixin calc(), it's works

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

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

or if you don't want to create a mixin, you can use calc() with other case ( Calc()or CALC() for example)

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

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

Cletuscleve

Answer 4

I'm not sure if I understand your question correctly, but you don't need the calc function for stylus:

width (100% / 12 * 10) - $gutter

That's all you have to write.

regards

Atheling

The use of a preprocessor does not dispense with the use of calc(). For example: when a fixed value must be extracted from a percentage, you cannot precalculate this value in advance. – Mayan