sass中 keyframes後變數無效的問題

定義動畫用@keyframes，為了保證相容性，一般在sass中會寫成

@mixin keyframes($a) 

@-moz-keyframes $a 
@keyframes $a 
}

呼叫方法：

0%

100%

}

在ruby老版本的sass直譯器中，上述呼叫方法是可以正確編譯的，但在ruby2.2中編譯後結果卻是錯誤的：　　

@-webkit-keyframes $a 

100% 
}@-moz-keyframes $a 
100% 
}@keyframes $a 
100% 
}

所以用sass中拼接字串的方法，修改為

@mixin keyframes($a)  

@-moz-keyframes # 
@keyframes # 
}

正確編譯的結果為

//呼叫

0%     
100% 
}    
//編譯結果
0% 100% 
}  0% 
100% 
}  0% 
100% 
}

CSS3 中的 keyframes介紹

語法 keyframes animationname animationname 必需。定義動畫的名稱。keyframes selector 必需。動畫時長的百分比。合法的值 0 100 from 與 0 相同 to 與 100 相同 css styles 必需。乙個或多個合法的 css 樣式屬性。...

Sass中Interpolation 的用法

scss語法 prop2 border mixin longzhoufeng wid,sty,col 其實就是結合混合巨集傳多個引數 myinterpolation2 css語法 myinterpolation2 如圖 scss語法 charset utf 8 不宣告在ruby編譯時會報錯，因為下面...

sass用法總結（持續更新中）

官網 1，巢狀規則 1.1普通巢狀 sass 允許將一套 css 樣式巢狀進另一套樣式中，內層的樣式將它外層的選擇器作為父選擇器 1.2父選擇器 hover 在巢狀 css 規則時，有時也需要直接使用巢狀外層的父選擇器，例如，當給某個元素設定hover樣式時，或者當body元素有某個 classna...