octopressのcss(sass/compass)を見ながら編集したりする

私はwebのフロントエンドなんてまったくさっぱりこれっぽっちもである。

Octopress丸出しのデザインで、それはそれでそういうことに無頓着ならばいいのだが、こうあってほしいなあ〜と思うことがあり、cssをいじりたいのだが、media queryとかもあり、どこをいじったらどう作用されてどうなってるのかさっぱりわからず憤慨していたのだが、Chromeにそういう「どこのcssが適用されているかわかる」機能があるらしい。それを使えるようになるのがメチャクチャ手間どったし、全然理解できてないけれど、まぁこうすればできるよというメモ。

1. 人類とChromeが読めるようにしてもらう

たぶんこのような依存になっている

• jekyll
  • compass
  • sass

で、compass + sass の設定を config.rb でできるらしい。

そういうわけで config.rb の末尾に以下を追加

config.rb

output_style = :debug
sourcemap = true

2. preview を開始

bundle exec か rake かは自分の環境にあわせて。

$ bundle exec rake preview
## Generating Site with Jekyll
 modified config.rb
    clean source/stylesheets
   delete source/stylesheets/screen.css
    write source/stylesheets/screen.css
    write source/stylesheets/screen.css.map

delete とか write source/stylesheets/screen.css.map とかでてればうまくいってる。

3. chrome で見る

1. Chromeを起動 http://localhost:4000 を見る
2. developperツールを起動
   1. setting > Sources > Enable CSS source maps を ON
   2. ついでに Auto-reload generated CSS を ON
   3. setting閉じる
3. reloadすると、Stylesのところにsassの元ソースの行数が書いてある。やったぜ。

4. 編集する

上記3.で確認したところ好きなようにファイル編集、保存すると、以下のように表示されて再適用されるらしい。

 modified sass/base/_typography.scss
    write public/stylesheets/screen.css
    write public/stylesheets/screen.css.map

5. publishするときは・・・

上記手順1.で config.rb に追加した2行をコメントアウトしておいたほうがよいでしょう。