いやー
探しましたよ。プラグイン
結論
Live Sass Compiler - Visual Studio Marketplace
Extension for Visual Studio Code - Compile Sass or Scss to CSS at realtime.
marketplace.visualstudio.com
これが一番おすすめ
同じLive Sass Compilerでも本家じゃないから注意
本家 Live Sass Compiler では Dart Sass でコンパイルできないのでご注意を！
というか、Last updated 2018/7/12 3:09:40 ですから、使わない方がいいでしょう。
Live Sass Compiler - Visual Studio Marketplace
Extension for Visual Studio Code - Compile Sass or Scss to CSS at realtime with live browser reload.
marketplace.visualstudio.com
DartJS Sass Compiler and Sass Watcherもつかってみたけど
DartJS Sass Compiler and Sass Watcher - Visual Studio Marketplace
Extension for Visual Studio Code - Compile Sass and Scss files using DartSass Compiler - Visual Studio Code (vsce) plugi...
marketplace.visualstudio.com
DartJS Sass Compiler and Sass Watcherを使ってみたけど、Prefixが入らなかった！！
"dartsass.autoPrefixBrowsersList": [ "last 2 versions", "ie >= 11", "Android >= 4", "ios_saf >= 8" ],
こんな風に設定してみたのですが、コンパイルしたら、プレフィックスが自動で入らない。
こりゃダメだ～～～～～
分割したscssファイル（パーシャル）もwatchの対象にするのが大変
- node.jsのインストール
- パスの登録
などが必要なわけです。
登録するのが大変なので、毎回手作業でコンパイルしようと思ったけど、面倒。
面倒。
ほかに無いかな？？？？
と探していたら、使っていたLive Sass Compilerでいけるじゃん！！
Live Sass Compiler でDart sassをおすすめする理由
- 面倒なことをしなくても、分割したscssファイル（パーシャル）もwatchの対象にできる
- プレフィックスが自動で入ってくれる
- 警告がちゃんと出てくれる
使い方は簡単
vs codeにLive Sass Compilerをインストールする。
拡張機能を有効化する
Workspaceで設定する
scssをセーブしたら、自動でコンパイルさせて、mapも出しておこう。パスも変えよう。ie11も一応入れておこう。という感じで設定すると…
"liveSassCompile.settings.generateMap": true,
"liveSassCompile.settings.compileOnWatch": true,
"liveSassCompile.settings.formats": [
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "~/../",
"savePathSegmentKeys": null,
"savePathReplaceSegmentsWith": null
}
],
"liveSassCompile.settings.autoprefix": [
"last 2 versions",
"ie >= 11",
"Android >= 4",
"ios_saf >= 8"
],
画面下側にある「Watch Sass」をクリックするとコンパイルしてくれるようになります。
「Watch Sass」 →「Watching…」になる。
コンパイルを停止するときは 「Watching…」 をクリックするだけ。
例えば、(1200px/2)だと警告してくれる
ご存じのように、下記はDart Sassでは非推奨の書き方です。
.dd {
width: (1200px / 2);
}
こんな感じで警告してくれます。
警告のとおり、書き直せばOK。
.dd {
width: math.div(1200px, 2);
}
でも、 math.div と書くのが大変。
ということで、スニペット
"m": {
"prefix": "m",
"body": "math.div($1,$2)"
}
こんな感じでスニペットにしてみました。結構便利です。
スニペットの仕方は…そのうちにね。
