Visual Studio Code - 拡張機能 - SCSS - Autoprefixer


 　クラウディア
1.　概要
2.　設定 
1.　概要


　「Live Sass Compiler」と同時に「Autoprefixer」をインストールしたためか、どうもそれ風の動きが見える。

　もともとある程度「Live Sass Compiler」が機能を持っているかは知らん。

　元の「.scss」で



.box300
{
	display: flex;
	width: 300px-10px;
	text-align: center;															//	テキスト左右中央
	align-items: center;														//	左右中央
	justify-content: center;													//	上下中央
}



　と書いてあったものが、「.css」では



.box300 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 290px;
  text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}



　になっております。

　「FreeBSD」で、「npm」「gulp」で作成した場合と同じでした。

　他に微妙な違いはありましたが・・・。

　ここは、きちんと設定してみます。

　本ページは、下記のサイトを参考にさせていただきました。


「VSCode の拡張機能のみで Sass のコンパイル、Autoprefixer の自動付与、SourceMap の自動生成をする - Qiita」




2.　設定


　参考サイトの通りにみてみますと「settings.json」の「settings」に



    "liveSassCompile.settings.autoprefix": [
        "> 1%",
        "last 2 versions"
    ],



　てなことを書けば、「シェアが1%以上あるブラウザ」または「最後から2バージョンのブラウザ」が対象となるようです。

　「GitHub - browserslist/browserslist」に詳しい解説があるようなのですが、いかんせん、英語で読めない。

　わたしは、太っ腹なので、４バージョン対応しちゃります。
earthcar（アースカー）