如何在calc（）中使用多个笔针？

Question

所有内容都在标题中。我不能在CSS calc（）函数中合并几个Stylus变量。

我创建了一个代码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

手写笔转义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()混入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);
}

Answer 4

我不确定我是否正确理解了您的问题，但是您不需要针对手写笔的calc函数：

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

这就是您要写的全部。

问候