带插值变量的数学? [英] Math with interpolated variables?
本文介绍了带插值变量的数学?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
考虑以下 sass:
$font-size: 18;
$em: $font-size;
$column: $font-size * 3; // The column-width of my grid in pixels
$gutter: $font-size * 1; // The gutter-width of my grid in pixels
$gutter-em: #{$gutter / $em}em; // The gutter-width in ems.
$column-em: #{$column / $em}em; // The column-width in ems;
$foo = $gutter-em / 2; // This results in a value like "1em/2". :(
$bar = ($gutter-em / 2); // this doesn't work either, same as above.
如何生成一个有效的 $foo
,并且可以在其他表达式中进一步重用?
How can I generate a $foo
that works, and that I can reuse further in other expressions?
推荐答案
Sass 不能对字符串进行算术运算,只能进行连接.当您使用插值时,您创建的是一个看起来像一个数字的字符串:
Sass cannot perform arithemetic operations on strings, only concatenation. When you use interpolation, what you've created is a string that looks like a number:
@debug type-of(#{10px}); // string
@debug type-of('10px'); // string
@debug type-of(unquote('10px')); // string
@debug type-of(10px); // number
如果你想要一个数字,不要使用插值,也不要使用引号.要将整数(例如 10
)转换为长度(例如 10px
),请使用乘法:
If you want a number, do not use interpolation and do not use quotes. For converting an integer (eg. 10
) to a length (eg. 10px
), use multiplication:
$gutter-em: ($gutter / $em) * 1em;
@debug type-of($gutter-em); // number
这篇关于带插值变量的数学?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文