sass+compassで快適にコーディング
ちょこちょこsassの話題を出していますが、sassの事を記事にした事はまだありません。それは僕自身がまだsassを何となく使っているだけで、sassとはこうだ！的な説明ができないからです。 でも逆に言うとただ何となくつかっているだけでもsassは凄く便利で、ワークフローに欠かせないものになっています。ただ唯一面倒なのがsassはコンパイルしてCSSに書き出す必要があるという事ぐらいですが、compassで監視して自動で書き出してくれるので思っているよりは面倒ではないのですが、若干書き出すまでにラグがあります。
sassの特徴
- セレクタを入れ子で記述できる
- 変数が使える
- セレクタの継承ができる
- mixinがつかえる
セレクタを入れ子で記述できる
セレクタを入れ子で記述できることは思いのほか便利で慣れてしまうと普通に記述するのが凄く面倒になります。以下のように記述したコードが
|
1 2 3 4 5 6 7 |
.header{ width:100%; background:#444; h1{ color:#fff; } } |
コンパイルされるとこうなります。
|
1 2 3 4 5 6 7 |
.header{ width:100%; background:#444; } .header h1{ color:#fff; } |
変数が使える
変数と聞くとちょっとプログラムちっくで小難しく感じてしまうかもしれませんが、そんな事はありません。
変数の書き方
|
1 |
$変数:値; |
僕はメインカラーやサブカラーを変数に定義してよくつかいます。
コンパイル前
|
1 2 3 4 5 6 7 |
$main_color:#bbb; $sub_color:#444; .header{ width:100%; background:$main_color; } |
コンパイル後
|
1 2 3 4 |
.header{ width:100%; background:#bbb; } |
セレクタの継承ができる
ぼくはmixinのほうをよく使うので、あまり使わないですが、他のセレクタの内容をそのまま使う事ができます。もってきたセレクタの内容にプラスして記述する事もできます。
|
1 2 3 4 5 6 7 8 9 |
.header{ width:100%; background:#bbb; } .footer{ @extend .header; border-top:1px solid #ddd; } |
コンパイル後
|
1 2 3 4 5 |
.footer{ width:100%; background:#bbb; border-top:1px solid #ddd; } |
mixinがつかえる
mixinは予め定義していたスタイルを使う事ができる機能です。
|
1 2 3 4 5 |
@mixin screen_inner{width:1000px; margin:0 auto;} .header{ @include screen_inner; } |
コンパイル後
|
1 2 3 4 |
.header{ width:1000px; margin:0 auto; } |
基本的な特徴はこんな感じです。
sassのインストール
sassを使うにはRubyが必要ですのでRubyをインストールする必要があります。Macは最初からインストールされています。
1.Rubyのインストール（Macは不要）
http://rubyinstaller.org/downloads/ からインストーラーをダウンロード＆インストール
2.ターミナル(winはコマンドプロントorルビーコマンドプロント）でRubyGemを最新にアップデート
以下を入力（少し時間かかります。）
Mac
|
1 |
sudo gem update --system |
Win
|
1 |
gem update --system |
3.ターミナル(winはコマンドプロントorルビーコマンドプロント）でSass+Compassのインストール
以下を入力（反応するまで時間がかかります。）
Compassのインストール
Mac
|
1 |
sudo gem install compass |
Win
|
1 |
gem install compass |
Sassのインストール
Mac
|
1 |
sudo gem install sass |
Win
|
1 |
gem install sass |
以上でインストールは完了です。
Sass+Compassの使い方
以下の内容をコピーしてconfig.rbというファイルを作成し各種パスを環境にあわせて変更する。
|
1 2 3 4 5 6 7 |
http_path = "/"//index.htmlやindex.phpのある場所 css_dir = "css" sass_dir = "scss" images_dir = "images" javascripts_dir = "js" output_style = :expanded//コンパイル時のcssの圧縮設定compressedで圧縮 line_comments = false//コンパイル時にsassのコード番号を維持するかどうか |
監視の開始
ターミナル(winはコマンドプロントorルビーコマンドプロント）で
cd 半角スペース サイトのディレクトリをドラッグ エンター
compass w エンターで
ディレクトリーの監視が開始され
scssファイルがcssファイルにコンパイルされます。
Dreamweaverでコードヒントを出す。
MMDocumentTypes.xmlを検索し
|
1 |
<documenttype id="CSS" internaltype="Text" winfileextension="css" macfileextension="css" file="Default.css" writebyteordermark="false" mimetype="text/css" > |
のカ所を
|
1 |
<documenttype id="CSS" internaltype="Text" winfileextension="css,scss" macfileextension="css,scss" file="Default.css" writebyteordermark="false" mimetype="text/css" > |
に変更
第一弾はこんな感じで！
- 2013年11月06日水曜日
- ：Naruhiko Wakai
comments