減：內部瀏覽器前綴的混入誤用混入

所以，在這裏我首先混入減：內部瀏覽器前綴的混入誤用混入

.3transitions (@value1,@value2,@value3,@duration){ 
    @value: ~"@{value1},@{value2},@{value3}";  
    .transition-property(@value); 
    .transition-delay(0); 
    .transition-duration(@duration); 
    .transition-timing-function(ease); 
}

，這裏是第二個（以及許多其他）

.transition-property(@transition-property) { 
    -webkit-transition-property: @transition-property; 
      transition-property: @transition-property; 
}

WebKit的瀏覽器，我應該得到編譯正確的瀏覽器前綴CSS，但我得到

-webkit-transition-property: margin-top,opacity,transform;

，而不是

-webkit-transition-property: margin-top,opacity,-webkit-transform;

請問我該怎麼辦？有沒有方法可以確定我使用的是CSS3風格？

來源

2014-07-07 thednp

它是[可能]（http://stackoverflow.com/questions/21061361/less-js-mixin-property-as-an-argument-of-another-mixin），但閱讀那裏的評論（簡而言之：浪費時間）。 –

謝謝，第二個答案很好，我修復了我的代碼:) – thednp

由於較少v2，它變得易於使用插件。 autoprefix plugin後處理您的較少代碼autoprefixer。

您可以通過在控制檯中運行以下命令安裝autoprefix插件：

npm install -g less-plugin-autoprefix

安裝插件後，你應該能夠在姿態運行下面的命令：

echo "element{ transition-property: margin-top,opacity, transform; }" | lessc - --autoprefix="last 20 versions"

上述命令將編譯成如下CSS代碼：

element { 
    -webkit-transition-property: margin-top, opacity, -webkit-transform; 
    -moz-transition-property: margin-top, opacity, -moz-transform; 
     -o-transition-property: margin-top, opacity, -o-transform; 
      transition-property: margin-top, opacity, transform; 
}

Y在編譯瀏覽器中的較少代碼客戶端時，不能使用此autoprefix插件。對於瀏覽器編譯中的客戶端，您可以考慮使用-prefixfree此Javascript庫將瀏覽器的前綴添加到利用Javascript的任何CSS代碼中。

如果您無法運行需要安裝節點的autoprefix，例如那些使用alternative compilers之一編譯Less的應用程序，則應該退回到前綴mixins，例如發現由@ seven-phases-max編寫的here。更好的是，你不應該重新發明輪子，並嘗試使用mixin libraries之一來解決前綴問題。

來源

2014-11-02 11:48:35

謝謝貝司。我發現了一個5行自動前綴，可以滿足我的需求。 PS：我從Github認識你，並熱愛你的工作。乾杯:) – thednp

減：內部瀏覽器前綴的混入誤用混入

回答

相關問題