Compassでのローカル・本番環境の画像パス設定について
画像だけサブドメイン・別ドメインで運用したりするとき、例えばこんな場合、
- ローカル: ./images
- 本番環境: http://pic.xxx.com
images_path = './images'
↑の設定でローカル開発中に生成されたスタイルシートは本番環境で使うことができない。
かと言ってimages_path
に本番環境のURLを設定することはできない(image-width()
,image-height()
がエラーを起こす)ので、こういう場合は
images_path = './images' http_images_path = 'http://pic.xxx.com'
とすると良い。
こうすればimage-width()
,image-height()
はローカルの画像を参照するしimage-url()
は本番環境のURLを出力してくれる。
ローカル・本番環境の切り替えは
environment = :development
で行うか、コマンドで
compass compile -e development --force
とかする。
入力フィールドのスタイル設定のメモ
どんどん種類が増えていくテキストフィールドに対してスタイルを設定するのはナンセンスなので、input, textarea
でテキストフィールドのスタイリングをして、その後ろに少数派のチェックボックス・ラジオボタン・ボタンのスタイルを記述していくと良さそげ。少数派のほうはテキストフィールドで設定したスタイルをリセットしないといけないけど、まぁそれは仕方ない。
というわけでSCSSでこんな感じに書くことにした。
@function attr-selectors($tag, $attr, $values) { $selector: null; @each $value in $values { $selector: "#{$selector}, #{$tag}[#{$attr}=#{$value}]"; } $selector: str-slice($selector, 2); @return $selector; } @mixin buttons { $selector: ".btn, button, #{attr-selectors(input, type, submit button reset)}"; #{$selector} { @content; } } input, textarea { // テキストフィールド } input[type=checkbox] { // チェックボックス } input[type=radio] { // ラジオボタン } @include buttons { // ボタン }