使用Stylus中的变量进行计算

时间:2018-04-11 09:48:22

标签: css stylus

我一直在浏览Stylus文档并查看示例,但在使用变量时似乎无法进行简单的计算。例如:

作品

margin-right: (1200 / 2)px;

不起作用

$siteWidth = 1200;
margin-right: ($siteWidth / 2)px;

我见过许多关于在calc中使用变量并在变量名前使用%的示例,或者在变量周围使用{..}的例子,但我已经尝试了两者并且都不起作用。我错过了一些明显的东西吗?

更新

我没有提到我将变量存储在单独的手写笔文件中。如果我在计算中使用它在同一个文件中创建变量,它工作正常,但如果我尝试从另一个文件导入变量时调用该变量,它就不起作用。变量文件是我的主styles.styl文件中包含的第一件事,我可以在没有问题的情况下使用站点范围内的变量 - 只是在出于某种原因在分区计算中使用它时。

Codepen

2 个答案:

答案 0 :(得分:1)

<强>更新

尝试使用此代替括号:

#{$site-width / 2}px;

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_

答案 1 :(得分:1)

这有点棘手,但我用下面的方法解决了我的问题:

margin-right: 'calc(-%s / 2)' % $sitewidth;

我实际上已经改变了我的代码以包含一个新变量来获得网站宽度的一半,因为我可能会再次使用它:

$halfsitewidth = $sitewidth / 2;
margin-right: '-%s' % $halfsitewidth;