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コンパイルを試してみました。
目次
環境
- Mac OS X 10.11.6
- Python 3.6.1
- IntelliJ IDEA Ultimate 2017.2
- IntelliJプラグイン
- Python 2017.2.172.3317.7
- File Watchers 172.3317.48
- libsass-python 0.13.2
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
今回は
とするため、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" }