旋轉LESS mixin IE兼容性

Question

我正在研究一個防彈Mixin LESS文件，我對IE8及更低版本的「rotate」屬性有問題。

根據這一post，轉動你必須使用以下屬性在IE瀏覽器的元素：

filter: progid:DXImageTransform.Microsoft.Matrix(
    M11 = COS_THETA, 
    M12 = -SIN_THETA, 
    M21 = SIN_THETA, 
    M22 = COS_THETA, 
    sizingMethod = 'auto expand' 
); 
Where COS_THETA and SIN_THETA are the cosine and sine values of the angle. 

我在寫LESS下面的代碼，但它似乎不起作用。

.rotate(@degrees: 45deg) { 
    -webkit-transform: rotate(@degrees); 
    -moz-transform: rotate(@degrees); 
    -ms-transform: rotate(@degrees); 
    -o-transform: rotate(@degrees); 
    transform: rotate(@degrees); 

    @cos: cos(@degrees); 
    @sin: sin(@degrees); 

    /* IE8- */ 
    filter: progid:DXImageTransform.Microsoft.Matrix(
     M11=@cos, 
     M12=-@sin, 
     M21=@sin, 
     M22=@cos, 
     sizingMethod='auto expand' 
    ); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(
     M11=@{cos}, 
     M12=-@{sin}, 
     M21=@{sin}, 
     M22=@{cos}, 
     SizingMethod = 'auto expand' 
    )"; 
} 

有什麼想法我做錯了什麼？或者你有其他建議來改善這種混合？

謝謝！

Answer 1

您需要轉義過濾器，並且代碼（我認爲）需要全部在一行上輸入（但請參見下文）。但是，如果需要，可以添加一個換行符來乾淨地輸出。所以這（用換行和間隔加）：

.rotate(@degrees: 45deg) { 
    -webkit-transform: rotate(@degrees); 
    -moz-transform: rotate(@degrees); 
    -ms-transform: rotate(@degrees); 
    -o-transform: rotate(@degrees); 
    transform: rotate(@degrees); 

    @cos: cos(@degrees); 
    @sin: sin(@degrees); 

    @nl: `"\n"`; // Newline 

    /* IE8- */ 
    filter: ~"progid:DXImageTransform.Microsoft.Matrix(@{nl} M11=@{cos},@{nl} M12=-@{sin},@{nl} M21=@{sin},@{nl} M22=@{cos},@{nl} sizingMethod='auto expand'@{nl} )"; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(@{nl} M11=@{cos},@{nl} M12=-@{sin},@{nl} M21=@{sin},@{nl} M22=@{cos},@{nl} sizingMethod='auto expand'@{nl} )"; 
} 

會產生這樣的：

-webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    /* IE8- */ 
    filter: progid:DXImageTransform.Microsoft.Matrix(
    M11=0.7071067811865476, 
    M12=-0.7071067811865475, 
    M21=0.7071067811865475, 
    M22=0.7071067811865476, 
    sizingMethod='auto expand' 
); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(
    M11=0.7071067811865476, 
    M12=-0.7071067811865475, 
    M21=0.7071067811865475, 
    M22=0.7071067811865476, 
    sizingMethod='auto expand' 
)"; 

基於對this question發現，可以對多條線路的數值做輸入，如果你分裂轉義字符串，就像這樣：

filter: ~"progid:DXImageTransform.Microsoft.Matrix(" 
    ~"@{nl} M11=@{cos}," 
    ~"@{nl} M12=-@{sin}," 
    ~"@{nl} M21=@{sin}," 
    ~"@{nl} M22=@{cos}," 
    ~"@{nl} sizingMethod='auto expand'" 
    ~"@{nl} )";