Drupal If IE scss mixin

Drupal-IE-scss-Mixin.md

Drupal If IE SCSS Mixin

NOTE: Mixin is below this readme

A simple scss mixin to apply styles to IE elements.

Based on the stackoverflow answer given by "cimmanon" in "Is it possible to use a mixin for browser-specific CSS"

Below is the the scss mixin and is used as follows:

Target all

To target all versions of IE

Scss:

    .btn{
      background-color:red;
      width:100%;
      color:white;
  
      &.btn-active {
        background-color:green;
        @include if-is-ie {
          background-color: red;
        }
      }
    }

CSS:

    .btn {
      background-color: red;
      width: 100%;
      color: white;
    }

    .btn.btn-active {
       background-color: green;
    }

    .lt-ie8 .btn.btn-active, 
    .lt-ie9 .btn.btn-active, 
    .lt-ie10 .btn.btn-active, 
    .gt-ie9 .btn.btn-active {
      background-color: red;
    }

Target Version

To target all certain versions of IE

Scss:

    .btn{
      background-color:red;
      width:100%;
      color:white;
  
      &.btn-active {
        background-color:green;
        @include if-is-ie(9 10) {
          background-color: red;
        }
      }
    }
    

CSS:

    .btn {
      background-color: red;
      width: 100%;
      color: white;
    }

    .btn.btn-active {
       background-color: green;
    }

    .lt-ie9 .btn.btn-active, 
    .lt-ie10 .btn.btn-active {
      background-color: red;
    }
    

if-is-ie.scss

$default-ie-versions: 8 9 11 !default;
@mixin if-is-ie($versions: $default-ie-versions) {
    $sel: ();
    @each $v in $versions {
        @if $v == 11 {
          $sel: append($sel, unquote('.gt-ie9 &'), comma);
        } @else if $v  == 7{
          $sel: append($sel, unquote('.lt-ie9.lt-ie8 &'), comma);
        } @else {
          $sel: append($sel, unquote('.lt-ie#{$v + 1} &'), comma);
        }
    }

    #{$sel} {
        @content;
    }
}