scssをcssに変換時のエラー

Question

sassに

.header_nav{
  display: flex;
}

と書くと
cssで

.header_nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

と出てきて

display: -ms-flexbox;

がエラーになってしまいます。ちなみにhtmlは

　　　<div class="header_right">
        <ul class="header_nav">
          <li class="nav"><a href="" >About</a></li>
          <li class="nav"><a href="" >Works</a></li>
          <li class="nav"><a href="" >SNS</a></li>
          <li class="nav"><a href="" >Contact</a></li>
        </ul>
      </div>

このように書いています。

Answer 1

別に問題ありません。変換でエラーが発生しているわけではありません。

CSSのプロパティ名や値名に"-ms"や"-webkit"等、頭にハイフン付きの接頭辞がつくことがあります。
これはベンダープレフィックスと呼ばれ、各ブラウザにおいて実装テスト中や非標準のスタイルに対して「吾輩のブラウザでだけ有効である」という意思表示をするものです。
接頭辞は主に開発している団体を指しています。-msならマイクロソフト、-webkitはchromium系、-appleもあります。

display: flexに関しては実装に対して紆余曲折があり、ベンダープレフィックスもさまざまなものが出ていました。ほとんどのブラウザはflexに落ち着きましたが、IE系ではflexに正式に対応することなく開発が終了しています。その実装途中に試験的に導入していた際の設定値が質問文にある-ms-flexboxです。

scssコンパイラは、指定のスタイルに対するベンダープレフィックスがある場合、ベンダープレフィックスつきの設定値も一緒に書き出します。ブラウザ側からこれらを見た場合、自分のブラウザ以外のベンダープレフィックスは無効と判断して読み飛ばします。エラーとなって不具合につながるわけではないので気にする必要はありません。
flexの場合は、3つのうちdisplay: flexが有効になっているはずなので何も問題はありません。