獲取指南針添加供應商前綴到動畫選擇器

任何人都可以告訴我如何讓Compass在供應商前綴添加到CSS3動畫選擇器編譯時？我的配置文件看起來像這樣。獲取指南針添加供應商前綴到動畫選擇器

http_path = "/" 
css_dir = "/" 
sass_dir = "/" 
images_dir = "img" 
javascripts_dir = "js" 

output_style = :expanded 
relative_assets = true 
line_comments = false

我試過把Compass::BrowserSupport.add_support("animation", "webkit", "moz", "ms")添加到它，但它不起作用。

編輯

針對cimmanon的評論，我想避免的每一個選擇重複這樣的：

.big-wheel { 
    left: 77px; 
    bottom: 11px; 
    -webkit-transform: rotate(0deg); 
    -webkit-animation-name: wheels; 
    -webkit-animation-duration: 0.25s; 
    -webkit-animation-iteration-count: infinite; 
    -moz-transform: rotate(0deg); 
    -moz-animation-name: wheels; 
    -moz-animation-duration: 0.25s; 
    -moz-animation-iteration-count: infinite; 
    -ms-transform: rotate(0deg); 
    -ms-animation-name: wheels; 
    -ms-animation-duration: 0.25s; 
    -ms-animation-iteration-count: infinite; 
    transform: rotate(0deg); 
    animation-name: wheels; 
    animation-duration: 0.25s; 
    animation-iteration-count: infinite; 
}

來源

2013-07-12 And Finally

具體什麼是你想怎麼辦？無論感覺如何，Compass都不會奇蹟般地注入前綴。前綴主要通過[mixins]完成（http://compass-style.org/reference/compass/css3/）。 – cimmanon

哦，好的..基本上我想避免必須做到上述（在編輯中添加）。 –

指南針確實有混入一個專爲transform

我沒有看到混入用於記錄網站上的其他項目。如果您需要使用experimental mixin，Compass可以輕鬆編寫自己的文件。

.foo { 
    @include experimental('animation-name', wheels, webkit, moz, o, ms, not khtml); 
    @include experimental('animation-duration', 0.25s, webkit, moz, o, ms, not khtml); 
    // alternate way of setting prefixes 
    $animation-support: webkit, moz, o, ms, not khtml; 
    @include experimental('animation-iteration-count', infinite, $animation-support...); 
}

編譯爲：

.foo { 
    -webkit-animation-name: wheels; 
    -moz-animation-name: wheels; 
    -ms-animation-name: wheels; 
    -o-animation-name: wheels; 
    animation-name: wheels; 
    -webkit-animation-duration: 0.25s; 
    -moz-animation-duration: 0.25s; 
    -ms-animation-duration: 0.25s; 
    -o-animation-duration: 0.25s; 
    animation-duration: 0.25s; 
    -webkit-animation-iteration-count: infinite; 
    -moz-animation-iteration-count: infinite; 
    -ms-animation-iteration-count: infinite; 
    -o-animation-iteration-count: infinite; 
    animation-iteration-count: infinite; 
}

來源

2013-07-12 17:51:41 cimmanon

謝謝cimmanon。這似乎是Compass支持中的一個奇怪的漏洞。我也遇到了David Walsh網站上的vendorize mixin，它也做了類似的事情。 http://css-tricks.com/redesigning-with-sass/ –

網站上記錄的內容是穩定版Compass中的內容。在Sass存儲庫中有*新東西，可以使用邊緣版本（通過'gem install compass --pre'安裝）：https：//github.com/chriseppstein/compass/blob/transforms/frameworks/compass /stylesheets/compass/css3/_animation.scss – cimmanon

動畫已添加到主分支 - 0.13需要很長時間才能完全釋放。如果你不習慣使用alpha（我已經有一段時間了），現在可以使用[compass animation plugin]（https://github.com/ericam/compass-animation）。 –

-1

你可以嘗試像Bourbon庫。然後在您的SCSS文件中，您只需編寫一個include聲明，而Bourbon將在導出時爲您生成所有前綴。

@include transform(translateY(50px));

來源

2013-07-12 17:43:39

這不是問題所要求的。變換與動畫不同; Compass也有自己的轉換混音器。 – Ojame

獲取指南針添加供應商前綴到動畫選擇器

回答

相關問題