Grav で Scssを使う

Grav でデフォルトにある Antimatter テーマのスタイルをいじろうとThemaフォルダ内を覗くと CSS が Scss で作られていることがわかります。

結構複雑に分割されている気がする(管理人は Scss 初心者)ので、どこをどうしてコンパイルすりゃいいのだろうと公式を見たら、ちゃんとやり方が書いてありましたのでメモ。

To install Sass on your computer, simply follow the instructions on the sass-lang.com website.

  1. Execute the simple provided scss shell script by typing $ ./scss.sh from the root of the theme.
  2. Running the command directly $ scss --sourcemap --watch scss:css-compiled which is the same thing.

By default, this will compile your scss files into the css-compiled/ folder. You can then reference the resulting css file in your theme.

引用元:Grav - Theme Basics

Scss のインストールに関しては私よりずっと詳しい方が他所で解説してくださってるので割愛いたしますが、
要するに Antimatter ディレクトリに scss.sh があるからterminal 等コマンドラインから Antimatter ディレクトリに移動し、それを下記の通りに実行すればあとは勝手に監視して保存時にコンパイルしてくれるよということです。

$ cd thema_dir  
$ ./scss.sh

実際にやってみたところ、書いてある通り css-compiled ディレクトリにコンパイルされたファイルが書き出されていました。

最初やり方を調べていなかったので、全部 custom.css で上書きしちゃっていたのですが、 これでデフォルトテーマをベースにスタイルは改造し放題ですね!

基本的にいじる時は theme ディレクトリを複製して、複製した方をいじることをお勧めいたします。

コメントを残す

応援する