具有多重声明的sass数学

Question

所以我想避免这个小问题。

$var: 30px;

font: 25px/25px font,font,font;                   //Works
font: ($var - 5)/($var - 5) font, font, font;     //Works not
font: ($var - 5px)/($var - 5px) font, font, font; //Works not

margin: 0 0 20px 0;                               //Works
margin: 0 0 ($var - 10) 0;                        //Works not
margin: 0 0 ($var - 10px) 0;                      //Works not

基本上我在变量中有一个宽度被多次减去。它似乎是问题在于它试图用斜线划分两个数字。

我可以这样使用它：

margin-top: 0;
margin-right: 0;
margin-bottom: ($var - 10px);
margin-left: 0;

但这似乎是一种不整齐的方法。

Answer 1

我已经使用SASS v.3.2.19在Sassmeister上测试了这个片段

div {
  font: ($var - 5)#{"/"}($var - 5) font1, font2;     
  margin: 0 0 ($var - 10) 0; 
}

，输出

div {
  font: 25px/25px  font1, font2;
  margin: 0 0 20px 0;
}

对于font我已经转义了/符号，否则sass会尝试执行除法

Answer 2

在发布此消息后，我的同事找到了答案：

#{$var - 5}/#{$var - 5}