compassのconfig.rbとか自作mixinとかの話 - 女子小学生と××したい

はてな記法ってなんだよくそがあああああああああああああ！！！！！！！！！！！
どうもかるねです。sass/scssのプラグイン集だったり、プラグインの自作ができるcompassのお話です。

config.rb

compass createするとsass,cssディレクトリと一緒に作られるこのconfig.rbをメモがてら書いて解説していきますよ

http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"

cache = false
output_style = (environment == :production) ? :compressed : :expanded
line_comments = (environment == :production) ? false : true

最近変えたのは

output_style = (environment == :production) ? :compressed : :expanded
line_comments = (environment == :production) ? false : true

ここ。そんなに変わんないけどね。最初から解説していくと

http_path = "/"

いきなりいまいちわかってない。公式ドキュメントには「The path to the project when running within the web server. Defaults to "/".」ってなってるけどここ変えても特に不具合が起きたことがないし情報が少ない。誰か教えて

css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"

config.rbから見た各コンテンツ群のディレクトリ。

cache = false

コンパイル時に作られる.sass-cacheディレクトリを作らない設定。別にあってもなくてもいいんだけどたまに間違えてプロジェクトのリポジトリにコミットしちゃうから書いてる。

output_style = (environment == :production) ? :compressed : :expanded
line_comments = (environment == :production) ? false : true

三項演算子については後述。
output_styleはコンパイルによって出力されるcssの見た目を決定する。取りうる値は4つ、expanded、nested、compact、compressed。後に行くほど可読性が下がる。expandedとnestedはほぼ同じ、compactはセレクタとそれに対応するスタイルを1行で記述し、compressedは改行もスペースもない。
line_commentsはbooleanをとり、出力されるcssにコメントを付加するか否かを決める。trueにすると、出力されたcssの各要素に、それがどのsass/scssファイルの何行目をコンパイルしたコードかというコメントが付加される。
開発時にデバッグするときはよくコンパイルされたcssを読むので、expandedかつline_commentsありでコンパイルしているが、本番時はできる限り容量を削りたいので、compressedかつline_commentsなしでコンパイルしたい。ただ、そのためにconfig.rbを書き換えるのは面倒なので、前述の三項演算子を使う。
変数environmentはproduction(本番)とdevelopment(開発)の2つの値をとり、コンパイル時の引数から指定できる。ちなみにこのconfig.rbの場合、開発時は

compass watch -e development

でコンパイルしてexpandedかつline_commentsありのcssを出力し、本番時は

compass watch -e production

でコンパイルしてcompressedかつline_commentsなしのcssを出力する。

他にも色々便利オプションありそうなので、ご存知の方はコメントで殴りに来てください。
あ、自作mixin………いいや次回にしよう。