爲什麼在這個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。