素人趣味のWeb制作ブログ

素人趣味でやってるWeb制作とかプログラミングとかそっち系の話題についてのブログです。

素人趣味でやってるWeb制作とかプログラミングとかそっち系の話題についてのブログです。

Compassでスタイルシート生成後にCSSOで圧縮

CSSOっていうすごく良い感じにスタイルシートを圧縮してくれるツールがあります。それで、Compassスタイルシート生成後に自動でこのCSSOで圧縮したいと常々思ってたんですけど、config.rbスタイルシートを保存したときの動作を記述できるのを知ってさっそくやってみました。

gist6590457

今のところ、とても良い感じ。
CSSにバナー付けたいときとかもここに適当に処理書けばいいわけねー。

追記1:spawnやめてsystemにした。spawnは非同期らしく、圧縮したあとにバナーつけたりしたいときにツライ。

Compassでのローカル・本番環境の画像パス設定について

画像だけサブドメイン・別ドメインで運用したりするとき、例えばこんな場合、

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 {
  // ボタン
}