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

好的，我的同事在发布后立即找到了答案：

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

Answer 2

我用 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会尝试执行除法

sass 具有多重声明的数学

sass math with multiple declaration

css

sass