引導3翻譯MIXIN

如何在翻譯混入添加值？我想有在Y這些值座標：引導3翻譯MIXIN

-webkit-transform: translateY(-50%); 
-ms-transform: translateY(-50%); 
-o-transform: translateY(-50%); 
transform: translateY(-50%);

的引導混入：

.translate(@x; @y) { 
-webkit-transform: translate(@x, @y); 
    -ms-transform: translate(@x, @y); // IE9 only 
    -o-transform: translate(@x, @y); 
     transform: translate(@x, @y); 
}

如何添加在Y 50％座標??? 我曾嘗試：

.translate(@y: 50%);

但我得到一個錯誤，任何想法？

來源

2015-01-14 Augusto Triste

對不起，我回答了這個問題，然後才意識到，我可能完全誤解了你，因爲我看到一個'-50％''在另一個'50％'，並且有一個聲明要添加50％。您是否希望將翻譯添加到已翻譯的元素中（或）我的解決方案是否解決您的問題？ – Harry

沒問題，我明白了，我只需要一個真實生活的例子，你提供了一個。發現！！謝謝！！ –

注：使用較少混入的供應商前綴是不好的做法，這個答案不作任何企圖推薦它。它只提供了被問到的問題的直接答案。如果您有興趣瞭解供應商前綴的推薦方法，請在Bass Jobsen的answer in this thread上獲得一筆戰利品。

爲什麼你的mixin調用不起作用？

每當一個混合調用時，如果少的所有參數有一個值（默認值或混入調用傳遞的值）只調用混入。

在這種情況下，自舉translate混入具有2個參數（不具有默認值），並且混入呼叫只有一個參數。正因爲如此，mixin永遠不會被調用/處理。

問題的解決方案是什麼？

爲了克服這個問題，可以只傳遞0（或0%）到@x參數等

.translate(@x; @y) { 
    -webkit-transform: translate(@x, @y); 
    -ms-transform: translate(@x, @y); // IE9 only 
    -o-transform: translate(@x, @y); 
    transform: translate(@x, @y); 
} 

div{ 
    .translate(@x: 0%;@y: 50%); 
}

這將產生一個輸出，其基本上等同於僅在Y軸的平移（如可以在this simple sample中看到）。

下面是輸出

div { 
    -webkit-transform: translate(0%, 50%); 
    -ms-transform: translate(0%, 50%); 
    -o-transform: translate(0%, 50%); 
    transform: translate(0%, 50%); 
}

，這是相當於

div { 
    -webkit-transform: translateY(50%); 
    -ms-transform: translateY(50%); 
    -o-transform: translateY(50%); 
    transform: translateY(50%); 
}

來源

2015-01-14 09:55:45 Harry

謝謝，現在完美！ –

是的。我的downvote只是爲了平衡你和巴斯的答案。雖然你的答案在一般情況下是完全正確和有用的，但重要的是Bootstrap供應商的mixin已被棄用，OP不應該首先使用它們。 –

再次平衡;） –

通過@harry接受的答案解決您的問題，的確，但共識是，你應該使用（後續）autoprefixer來設置供應商前綴以獲得最佳實踐。另請參閱：LESS transition mixin with prefixes

Less autoprefix插件可在以下位置找到：https://github.com/less/less-plugin-autoprefix。

安裝後，你可以運行：

echo "div {transform: translateY(-50%);}" | lessc - --autoprefix="last 20 versions"

以上輸出：

div { 
    -webkit-transform: translateY(50%); 
    -moz-transform: translateY(50%); 
     -ms-transform: translateY(50%); 
     -o-transform: translateY(50%); 
      transform: translateY(50%); 
}

要兼容自舉你應該運行：

echo "div {transform: translateY(-50%);}" | lessc - --autoprefix="Android 2.3,Android >= 4,Chrome >= 20,Firefox >= 24,Explorer >= 8,iOS >= 6,Opera >= 12,Safari >= 6"

上面的命令已經指定與默認的Bootstrap構建過程相同的瀏覽器。你應該注意到Bootstrap自v3.2以後使用autoprefixer。前述可以檢查引導的更少/廠商prefixes.less的源時，可以似乎：

供應商前綴

所有供應商的混入被棄用V3.2.0的由於引入 Autoprefixer的我們的Gruntfile。他們將在第4版中被刪除。

來源

2015-01-14 13:33:04

引導3翻譯MIXIN

回答

相關問題