libsass-pythonを使って、IntelliJ + File WathersプラグインでSassをコンパイルする

IntelliJ IDEA

IntelliJで書いているPythonアプリにて、Sassを使おうと考えました。

Sassのサイトを見たところ、Rubyが必要そうでした。
Sass: Install Sass

他の方法がないかを探したところ、LibSassがありました。

LibSass周りを調べると、libsass-pythonを使うことで、PythonでもSassをコンパイルできそうでした。
libsass-python: Sass/SCSS for Python — libsass 0.13.2 documentation

　
次に、特定のSassファイルだけをコンパイルする方法を調べたところ、IntelliJのFile Watchersプラグインを使えば良さそうでした。
IntelliJ IDEAで特定のscssだけcssにコンパイルする - Qiita

　
あとはIntelliJでlibsass-pythonを使う方法が分かればよいのですが、IntelliJのヘルプにはLibSassを使ったコンパイル方法は記載されていませんでした。
Compiling Sass, Less, and SCSS to CSS - Help | IntelliJ IDEA

　
そこで、libsass-pythonを使って、IntelliJ + FileWatherプラグインでSassコンパイルを試してみました。

　
目次

　

環境

　

libsass-pythonのインストール

pipでインストールします。

# venv環境を作り、activate
$ python -m venv env36
$ source env36/bin/activate

# libsassをインストール
(env36) $ pip install libsass
...
Successfully installed libsass-0.13.2 six-1.10.0

　

プロジェクトの用意

IntelliJでプロジェクトルートを開く

File > Open より、プロジェクトルートを開きます。

プロジェクトルートはこんな感じです。

$ ls -al
total 0
drwxr-xr-x   6 you  staff   204  7 31 12:35 .idea
drwxr-xr-x   7 you  staff   238  7 31 12:34 env36

　

Python SDKを追加
  • File > Project Structure
  • Project SDKのNewボタン > Python SDK > Add Local
  • /path/to/project_root/env36/bin/python を選択

　

File Watchers プラグインの確認

IntelliJ IDEA > Preferences > Plugins より、File Watchersが有効になっていることを確認します。

　

Sassファイルを用意

IntelliJ IDEAで特定のscssだけcssにコンパイルする - Qiita同様の構成とします。

$ tree -L 2 -a
.
├── .idea
├── css
├── env36
└── scss
    ├── exclude.scss
    └── style.scss

　

File Watchersプラグインを設定

Preferencesの Tools > File Watchers > 「+」ボタン > SCSS にて、File Watchersプラグイン設定を起動し、以下の設定を行います。

　

Scopeの設定
  • ...ボタン > +ボタン > Local > 任意の名前
  • 中央のディレクトリ構造で、先ほど作成したscss/style.scss を選択し、 Include ボタン
  • Pattern欄に、 file:scss/style.scss が設定されたことを確認

　

Programの設定

...ボタンを押して、venv環境のPythonを指定します。

/path/to/project_root/env36/bin/python

　

Argumentsの設定

今回はlibsass-pythonのsasscを使ってSassをコンパイルします。

そのため、Argumentsにはコマンドラインからsasscを使う時の設定を記載します。
sassc — SassC compliant command line interface — libsass 0.13.2 documentation

今回は

  • -tオプションで、expandedフォーマットで出力
  • -mオプションで、mapファイルを出力
  • コンパイル後のファイルの拡張子をcssにして、別のディレクトリへと出力

とするため、Argumentsには

-m sassc -t expanded -m $FileName$ ../css/$FileNameWithoutExtension$.css

を指定します。

　
あとはOKボタンを押してPreferencesを閉じます。

　

Sassファイルのコンパイル

以下の2ファイルを用意して保存します。

style.scss

#content {
  background-color: blue;
  p {
    color: red;
  }
}

exclude.scss

p{
  color: green;
}

　
すると、File Watchersプラグインが動作し、Sassがコンパイルされます。

$ tree -L 2 -a
.
├── .idea
├── css
│   ├── style.css    << 増えた
│   └── style.css.map    << 増えた
├── env36
├── scss
│   ├── exclude.scss
│   └── style.scss
├── style.css

　
expandedなフォーマットでコンパイルされました。

style.css

#content {
  background-color: blue;
}

#content p {
  color: red;
}

/*# sourceMappingURL=style.css.map */

　
style.css.map

{
    "version": 3,
    "file": "style.css",
    "sources": [
        "../scss/style.scss"
    ],
    "names": [],
    "mappings": "AAAA,AAAA,QAAQ,CAAC;EACP,gBAAgB,EAAE,IAAI;CAIvB;;AALD,AAEE,QAFM,CAEN,CAAC,CAAC;EACA,KAAK,EAAE,GAAG;CACX"
}