CSS Sublime Text2とsass,scss,compassという選択肢

いやぁどうもです。CSS覚えるのは大変ですねぇ。codaのCSSエディタにかなり助けられながらCSSのプロパティを覚えていきました。やはりコピペとかでCSSを記述する方も多いのかなぁとも思います。

coda1,cssエディタ
写真はcodaのCSSエディタです。
coda2からはないですけども、、覚えてくると補完機能で案外いけますよね。
CSSのプロパティが不安な方はこのようなエディタをご使用されるとよいのではないでしょうか。(CSSプロパティを覚えてしまうまでのツールとして。)

問題はCSS3

  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #446c92), color-stop(100%, #34526f));
  background-image: -webkit-linear-gradient(#446c92 0%, #34526f 100%);
  background-image: -moz-linear-gradient(#446c92 0%, #34526f 100%);
  background-image: -o-linear-gradient(#446c92 0%, #34526f 100%);
  background-image: linear-gradient(#446c92 0%, #34526f 100%);
  -webkit-box-shadow: 0px -2px 2px rgba(181, 181, 181, 0.8);
  -moz-box-shadow: 0px -2px 2px rgba(181, 181, 181, 0.8);
  box-shadow: 0px -2px 2px rgba(181, 181, 181, 0.8); }

例えば上のCSS(はしょってますが)colorの部分等を変更します?いやぁこれは、、これが1カ所であればまだなんとか、これがたくさんある場合は、、、
以前Sassをつかって見た時、ネストの印象が強く、Lessを使ってみた時、サイト毎の環境構築が大変そうな印象を持っていました。でも目的は上のベンダーフィックスの嵐をどう簡略化するのかでした。
compass公式サイト http://compass-style.org
google先生に訪ねてみる事、沢山のナイスで素敵な記事がいっぱいある。

上のCSSですが実際のscssファイルのセレクタには下の2行が入ってます。

@include gradient-top-lighten($color);
@include box-shadow(0px -2px 2px rgba(181,181,181,0.8));

$colorはなんだろう?
別のscssファイルに$color:#34526f; の記述でカラーをいつでも好きな色に変更することができます。
疑問なのは今使っているCSSの記述をscssの記述にすべてを変更しないといけないのか?等だと思いますがコンパイルする前のstyle.scssに編集中のstyle.cssの記述をそっくりコピーしてコンパイルしても中身は同じ記述のstyle.cssが吐き出されるのでscss,compassの機能を徐々に追加していっても何も問題ないです。
やれることが多い分、中々一気にってわけもいかないと思いますので。

sass,compassインストール

sassインストール

MACの場合
rubyは元から入っているので
ターミナルから

sudo gem install sass

Windowsの場合
rubyインストールから
参考サイト あと味様

compassインストール

Win,MAC共通

gem update --system
gem install compass

scss compassをコンパイルする Sublime Text2

scss compassをコンパイル(cssに変換)するGUIソフトが面倒でどうにかならないものかと考えておられる方もいるかと思います。あまり使った事がなくてすいません。(正直面倒です)っと素敵な記事が

参考サイト

一石三鳥!SublimeText2sass/SCSS(compass)+SFTPで作業効率化する方法。

上記のサイトでかなり詳しくSublime Text2での設定とコンパイル設定デモファイルの[config.rb]が配布、解説されていましたので設定してみてください。自分も上記サイトを参考にしSublime Text2を使用してみることにしました。(半ばくじけたのは内緒)

便利なのはSublime Text2のprojectを作成し、ビルドすれば compass watch (監視)してくれるところじゃないかなぁと思います。Sublime Textを起動→projectを選択→MACの場合command+Bでcompass watch!
今まで通りメインの.scssファイルの記述を変更か追加でセーブすると.cssに変更が加わるのでブラウザリロードで確認。

他のエディタ等では、ターミナルコマンドで監視するかコマンドを実行するファイルを作成し実行すればできるかと思います。(試してないけどチラット他サイトで見た)

重要なのはconfig.rb内部の記述

config.rbファイルの設定が終了したら別のローカルサイト等にconfig.rbファイルと今後蓄積するであろうscssファイル等を丸っとコピーしてSublime Text2のprojectファイルを作成すれば楽な気がします。

最後にやっちゃったこと

WordPressのローカル環境で開発されてる方へ
themes→各テーマネーム→の中にconfig.rbとSublime Text2のprojectファイル&workspaceファイルを置いて作業されることかとおもいますが、メインの.scssファイルの先頭にtheme name等を記述しているか確認しましょう。吐き出した.cssファイルにtheme nameとかが抜けてた。
すっかりわすれててWordPressテーマが壊れてますって出ててなんでじゃーって独り言に、、functions.phpをモジモジしたりとかなり悩んでしまいまして、、

compassの出来ること参考サイト
ここでcompassの出来る事見た方がはやいかも、、
めっちゃ勉強になります。(今でもscssを忘れた頃に見に行きます)

Sass・Compassまとめ

では!