为什么在这个SCSS无效性

Question

我无法实现与SCSS calc以下两个属性：

transform margin-bottom

这里是我的SCSS：

@for $i from 1 through 12 { 
     div:first-child:nth-last-child(#{$i}), 
     div:first-child:nth-last-child(#{$i})~div { 
     transform: scale(calc(1-(#{$i}*.1)), calc(1-(#{$i}*.1))); 
     margin-bottom: calc(20-#{$i})+px; 
     } 
    } 

这是我的输出css为i=1：

div:first-child:nth-last-child(1), 
div:first-child:nth-last-child(1) ~ div { 
    transform: scale(calc(1-(1*.1)), calc(1-(1*.1))); 
    margin-bottom: calc(20-1)px; 
} 

但是在使用chrome dev工具进行检查时，我总是收到invalid property value这两个css属性。任何想法为什么这可能会发生？

Answer 1

您需要在数学运算符（ - ，+，*，％）周围有空格并包含它们的单位类型。

你举的例子：

transform: scale(calc(1-(1*.1)), calc(1-(1*.1))); 
margin-bottom: calc(20-1)px; 

正确的用法：

transform: scale(calc(1 - (1 * .1)), calc(1 - (1 * .1))); 
margin-bottom: calc(20px - 1px); 

注意，这适用于CSS一般，没有特异性SCSS。