Как использовать несколько переменных Stylus in calc()?

Question

Все в названии. Я не могу включить несколько переменных Stylus в функцию CSS calc(). не

Я создал код Sass, я бы преобразовать себя под Стилус:

// *.scss 

$gutter : 1rem; 

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

Для одной переменной, не проблема:

// *.styl 

$gutter = 1rem 

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

Все становится сложнее, когда пытаются интегрировать результаты этого работа в переменной:

100%/12 * 10 

Answer 1

Просто заверните значения в скобки, например:

// *.styl 

$gutter = 1rem 

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

Answer 2

Она поставила меня на трассе:

// *.styl 

$gutter = 1rem 

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

Answer 3

Stylus избежать все содержимое функции известково

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

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

так что вы можете использовать Sprintf подобный оператор %, но это не реально легко te читать

/* .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() подмешать 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() например)

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

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