如何在calc()函数中使用多个变量Stylus？

Question

标题已经说明了一切。我无法在CSS的calc()函数中使用多个Stylus变量。

我创建了一个Sass代码，我想把它转换成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

- Olivier C

Answer 1

只需要将值用括号括起来，就像这样：

// *.styl

$gutter = 1rem

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

- Panya

Answer 2

她给我指明了方向：

// *.styl

$gutter = 1rem

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

- Olivier C

Answer 3

Stylus会转义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() mixin，使用 calc()，但 stylus 会尝试执行该操作。

/* .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() mixin重命名为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() （例如 Calc() 或 CALC()）

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

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

- Yukulélé

Answer 4

我不确定我是否正确理解了你的问题，但是在Stylus中你不需要使用calc函数：

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

这就是你需要写的全部内容。

敬礼

- pgalle

---

使用预处理器并不能省去对calc()的使用。例如：当需要从百分比中提取固定值时，无法提前预先计算此值。 - Olivier C