如何在calc（）中使用多個變量Stylus？

Question

一切都在標題中。我不能在函數CSS calc（）中包含幾個Stylus變量。

我創建了一個代碼無禮，我將自己轉換下手寫筆：

// *.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 */ 
.test1 
    $offset = 5px 
    $mult = 3 
    height calc(1em + $offset * $mult) 

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

，所以你可以用sprintf般的操作%但它的不是真的很容易te讀

/* .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()混入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); 
}