rotation LESS mixin IE compatibility

Question

I'm working on a bulletproof Mixin LESS file and i have a problem with the "rotate" property for IE8 and below.

According to this post, to rotate an element on IE you have to use the following property:

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.

I wrote the following code in LESS but it seems that it doesn't work.

.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'
    )";
}

Have any idea what am I doing wrong? Or have you other suggestions on improving this mixing?

Thank you!

score 0 · Accepted Answer · edited May 23 '17 at 11:47

You need to escape the filters, and the code (I thought) needed to be input all on one line (but see below). However, you can add a newline to output cleanly if you want. So this (with newlines and spacing added):

.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}  )";
}

Will produce this:

  -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'
  )";

Based on a discovery for this question, you can do the input for the values on multiple lines if you split the escaped string up, like so:

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

You have to set the correct unit for `cos(value, deg)` and `sin(value, deg)` means `@cos: cos(unit(@deg, deg));` and `@sin: sin(unit(@deg, deg));` then it will work for me perfectly. See http://lesscss.org/functions/#math-functions-sin — pleinx, May 03 '17 at 12:31

rotation LESS mixin IE compatibility

1 Answers1