広告

VS CodeでDart SassでコンパイルするプラグインはLive Sass Compiler

scss
この記事は約4分で読めます。

いやー

探しましたよ。プラグイン

結論

Live Sass Compiler - Visual Studio Marketplace
Extension for Visual Studio Code - Compile Sass or Scss to CSS at realtime.

これが一番おすすめ

同じ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.

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) plugin

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)"
}

こんな感じでスニペットにしてみました。結構便利です。

スニペットの仕方は…そのうちにね。