Stylus 如何在calc（）中使用多变量手写笔？

一切都在标题里。我无法在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

---

只需将值用括号括起来，如下所示：

// *.styl

$gutter = 1rem

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

---

她让我走上正轨：

// *.styl

$gutter = 1rem

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

---

手写笔逃逸calc函数的所有内容

/*.触笔*/
.test1
$offset=5px
$mult=3
高度计算（1米+偏移量*$mult）

/*.css*/
.test1{
高度：计算（1米+偏移量*$mult）；
}

因此，您可以使用类似sprintf的操作符

%

，但这并不容易理解

/*.触笔*/
.test2
$offset=5px
$mult=3
高度“计算（1em+%s*%s）”%（$offset$mult）

/*.css*/
.test2{
高度：计算（1em+5px*3）；
}

您可以创建一个使用

calc（）

的

calc2（）

混合，但手写笔将尝试执行该操作

/*.触笔*/
calc2（$expr…）
“计算（%s）”%$expr
.test3
$offset=5px
$mult=3
高度计算2（1米+偏移量*$mult）

/*.css*/
.test3{
高度：calc（16em）；
}

所以你必须避开所有的操作员。我认为它比sprintf语法更具可读性

/*.触笔*/
calc2（$expr…）
“计算（%s）”%$expr
.test4
$offset=5px
$mult=3
高度计算2（1em\+$offset\*$mult）

/*.css*/
.test4{
高度：计算（1em+5px*3）；
}

如果需要，可以重命名

calc2（）

mixin

calc（）

，它可以正常工作

/*.触笔*/
计算（$expr…）
“计算（%s）”%$expr
.test5
$offset=5px
$mult=3
高度计算（1em\+$offset\*$mult）

/*.css*/
.test5{
高度：计算（1em+5px*3）；
}

或者，如果不想创建mixin，可以将

calc（）

与其他case一起使用（

case（）

或

case（）

）

/*.触笔*/
.test6
$offset=5px
$mult=3
高度计算（1em\+$offset\*$mult）

/*.css*/
.test6{
高度：计算（1em+5px*3）；
}

我不确定是否正确理解了您的问题，但您不需要为触控笔提供计算功能：

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

这就是你要写的全部内容

问候