メディアクエリを含むSCSSで、CSSハックがすんなり使えなかったのでメモ。
(CSS-Grid を IE10/11 に対応させようとした時にハマった)

まずは解決策

@media を使ったCSSハックは使えないので、それ以外のものを採用する
`unquote('') とインターポレーションを使う
CSSハックの記述は各セレクタごとに必要 (入れ子構造は使えない)
メディアクエリをブロック中に入れるのはOK

以下、IE10/11 用のCSSハックの記述方法

# {unquote('_:-ms-input-placeholder, :root')} セレクタ1 {
  // スタイリング
}
# {unquote('_:-ms-input-placeholder, :root')} セレクタ2 {
  // スタイリング
}

解説

IE11のみ読み込ませる CSS Hack

IE8〜11/Edge12〜の各バージョンに対応したCSSハックまとめ | SPYWEB

CSSハックの記述はここを参考にさせてもらった。
今回は、IE10/IE11用のCSSハックを適用したい。

CSSハックは、以下の２種類に分類される。

@media を使用したもの
_:-ms- で始まりカンマを含むセレクタを使用するもの

@media を含むコードには、@media を使うハックは使えない

@media を含まないコードなら@media を使ったCSSハックが問題なく使える。しかし、@mediaを含むコードの場合、@media を入れ子にすると、入れ子にした箇所が変換後に統合されてしまい、その箇所はCSSハックにならなくなる。

// 変換前
@media screen\0 {
  .selector {
    property: value;
  }
  @media (max-width: 768px) {
    .selector {
      property: value;
    }
  }
}

// 変換後
@media screen\0 {
  .selector {
    property: value;
  }
}
// CSSハックが効かない
@media screen\0 and (max-width: 768px) {
  .selector {
    property: value;
  }
}

よって、@media を含むコードには @media を使うハックは使えない。
@media を含まないCSSハックを採用する。今回は IE10/11に対応する以下コードを使う。
(※ただし、このままでは SCSSでは使えない)

_:-ms-input-placeholder, :root セレクタ {
  // スタイリング
}

セレクタ部分にカンマを含む場合、変換で分割されてしまう

上記コードは、Sass 本来の挙動で以下のように変換される

// NG、変換後
_:-ms-input-placeholder セレクタ {
  // スタイリング
}
:root セレクタ {
  // スタイリング
}

これだともちろん CSSハックにならない。
カンマを含むセレクタ部をそのまま出力させるのに、unquote('') を使う必要がある。
さらにセレクタ部分で使うためにインターポレーションにする(そのまま使うとエラーになる)。
結果、以下のようなコードとなる

# {unquote('_:-ms-input-placeholder, :root')} セレクタ1 {
  // スタイリング
}

ネストでCSSハック部分をまとめることはできない

このようにネストで書けたら見通しが良いのだが、それはできない。

// NG
# {unquote('_:-ms-input-placeholder, :root')} {
  セレクタ1 {
    // スタイリング
  }
  セレクタ2 {
    // スタイリング
  }
}

前段落の例のように、カンマで複数セレクタ記述と解され変換で分割される。
なので、一つづつ CSSハックを書いてやる必要がある。

// OK (= 冒頭のコード)
# {unquote('_:-ms-input-placeholder, :root')} セレクタ1 {
  // スタイリング
}
# {unquote('_:-ms-input-placeholder, :root')} セレクタ2 {
  // スタイリング
}

参考記事