MACABOUTPORTFOLIOBLOGBLOGsass+compassで快適にコーディングちょこちょこsassの話題を出していますが、sassの事を記事にした事はまだありません。それは僕自身がまだsassを何となく使っているだけで、sassとはこうだ!的な説明ができないからです。逆に言うとただ何となくつかっているだけでもsassは凄く便利で、ワークフローに欠かせないものになっています。唯一面倒なのがsassはコンパイルしてCSSに書き出す必要があるという事ぐらいですが、compassで監視して自動で書き出してくれるので思っているよりは面倒ではないのですが、若干書き出すまでにラグがあります。sassの特徴セレクタを入れ子で記述できる変数が使えるセレクタの継承ができるmixinがつかえるセレクタを入れ子で記述できるセレクタを入れ子で記述できることは思いのほか便利で慣れてしまうと普通に記述するのが凄く面倒になります。}1234567.header{width:100%;background:#444;h1{color:#fff;}}コンパイルされるとこうなります。h1{color:#fff;}変数が使える変数と聞くとちょっとプログラムちっくで小難しく感じてしまうかもしれませんが、そんな事はありません。変数の書き方$変数:値;1$変数:値;僕はメインカラーやサブカラーを変数に定義してよくつかいます。}1234.header{width:100%;background:#bbb;}セレクタの継承ができるぼくはmixinのほうをよく使うので、あまり使わないですが、他のセレクタの内容をそのまま使う事ができます。もってきたセレクタの内容にプラスして記述する事もできます。#ddd;}mixinがつかえるmixinは予め定義していたスタイルを使う事ができる機能です。auto;}基本的な特徴はこんな感じです。sassのインストールsassを使うにはRubyが必要ですのでRubyをインストールする必要があります。Macは最初からインストールされています。インストーラーをダウンロード&インストール2.ターミナル(winはコマンドプロントorルビーコマンドプロント)でRubyGemを最新にアップデート以下を入力(少し時間かかります。--system3.ターミナル(winはコマンドプロントorルビーコマンドプロント)でSass+Compassのインストール以下を入力(反応するまで時間がかかります。sass以上でインストールは完了です。以下の内容をコピーしてconfig.rbというファイルを作成し各種パスを環境にあわせて変更する。scssファイルがcssファイルにコンパイルされます。Dreamweaverでコードヒントを出す。Wakai大阪でWebデザイナーをしています。メインでFireworksを使ってます。IllustratorやPhotoshopも使っています。