如何在 calc() 中使用多个变量 Stylus?
How to use multiple variables Stylus in calc()?
一切都在标题中。我无法在函数 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
只需将值括在方括号中,如下所示:
// *.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)
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);
}
我不确定我是否理解正确你的问题,但你不需要手写笔的计算功能:
width (100% / 12 * 10) - $gutter
这就是你要写的全部。
问候
一切都在标题中。我无法在函数 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
只需将值括在方括号中,如下所示:
// *.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)
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);
}
我不确定我是否理解正确你的问题,但你不需要手写笔的计算功能:
width (100% / 12 * 10) - $gutter
这就是你要写的全部。
问候