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

Posted 2023-03-07

【中文标题】如何在 calc() 中使用多个变量 Stylus？

【英文标题】：How to use multiple variables Stylus in calc()?

【发布时间】：2016-02-15 20:17:15

【问题描述】：

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

【参考方案1】：

只需将值括在括号中，如下所示：

// *.styl

$gutter = 1rem

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

【参考方案2】：

她让我走上了正轨：

// *.styl

$gutter = 1rem

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

【参考方案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);

您可以创建一个使用calc() 的calc2() mixin，但手写笔会尝试执行该操作

/* .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);

或者如果您不想创建 mixin，您可以使用 calc() 和其他情况（例如 Calc() 或 CALC()）

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

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

【参考方案4】：

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

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

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

问候