1-2. SASS+CompassでCSSを編集

前回でWPテーマのモックアップの雛形ができましたので、次はCSS(スタイルシート)を便利に編集するためのツール「SASS + Compass」の準備をしたいと思います。

ちなみにSASSというのは「Syntactically Awesome Style Sheets」の略で、CSSのメタ言語の一種。
複雑に入り組んだスタイルシートの記述も、SASSを使うことで入れ子にしたり変数を使ったりして見た目で分かりやすく・直感的に記述できます(SASSで記述したファイルは、コンパイルすることでCSSファイルに変換可能)。

そしてCompassというのは、SASSをもっと便利に使えるように拡張したツールのようなものです。

 

1. MacにSASSをインストール

最初に以下のコマンドをMacのターミナル実行して gem(Rubyのパッケージ管理ツール) をアップデートします。

次に以下のコマンドを実行し、さくっとSassをインストールしてしまいます。

インストール完了後、

とすると、インストールされた Sass のバージョンがターミナルに出力されます。

2. MacにCompassもインストール

以下のコマンドを実行して、 Compass もインストールします。

念のため、以下のコマンドでインストールされた Compass のバージョンを確認しておきます。

 

3. Compass の設定ファイルの作成と初期化

SASS+Compass のインストールが完了したところで、早速 Compass を利用してスタイルシートを作成していきます。

まずはターミナルを開いてモックアップの assets ディレクトリに移動。

次に以下のコマンドを実行してCompassプロジェクトのファイル一式を生成します(assetsディレクトリの構造にあわせてオプションを指定しています)。

これにより、assets ディレクトリ以下に以下のようなファイルおよびディレクトリが生成されます。

_sass/
SASSで記述したファイルを格納するディレクトリです。
ここに追加された.sassファイルがコンパイルされて、.cssファイルになります。
※「_(アンダースコア)」で始まる.sassファイルはインポート専用のファイルなので、.cssファイルは生成されません。

config.rb
Compassプロジェクトの設定ファイルです。このファイルに書かれた設定をもとにSASSファイルのコンパイルが行われます。

_sass/screen.scss
_sass/print.scss
_sass/ie.scss
「compass create」コマンドを実行したときに勝手に生成される .sass ファイルです。このままこのファイルを利用するもよし、これらは削除して別のファイルを作るもよし。

css/screen.css
css/print.css
css/ie.css
.sass ファイルがコンパイルされた結果のスタイルシートファイルです。

4. モックアップ用に sass ファイルを追加

モックアップ用に sass ファイルを追加していきます。今回は以下のような sass ファイルを作成することにします(勝手に作成された screen.scss、print.scss、ie.scss は削除します)。

_01_fonts.scss
Webフォントの読み込みや定義をおこなうインポート用ファイルです。

_02_normalize.scss
スタイルシートのノーマライズをおこなうインポート用ファイルです。

_03_accessibility.scss
アクセシビリティに関するスタイルを定義をするインポート用ファイルです。

_04_typography.scss
文字のスタイルを定義するインポート用ファイルです。

_05_form.scss
フォーム要素(テキストボックスやボタンなど)のスタイルを定義するインポート用ファイルです。

_06_layout.scss
ページのレイアウトを定義するインポート用ファイルです。

_mixins.scss
mixin(指定した引数に応じたスタイルの記述を生成する関数のような機能)を定義するインポート用ファイルです。

_variables.scss
テーマ全体で利用する配色や文字サイズ、レスポンシブデザインのブレークポイントなどを変数で定義するインポート用ファイルです。

common.scss
common.css のコンパイル元となるファイルです。中身は以下のように記述します。

 

5. CompassでSASSファイルをコンパイルしてcssファイルを生成

ターミナルを開いて config.rb があるディレクトリに移動し、以下のコマンドを実行します。

これにより、_sassディレクトリにある common.sassファイルから common.cssファイルが生成されます。

また以下のコマンドを実行することにより、sassファイルが変更されるたびにcssファイルが生成されるようになります。

 

6. 各ページに common.css を読み込む

生成された common.css は、 link タグを使って各ページに読み込みこむようにします(Dreamweaverを使う場合は、Templates/common.dwt を編集すればOK)。

 

以上で SASS+Compass を使ったスタイルシートの編集が可能となりました。

次回はHTMLをガシガシと作りこんでいきます。

 

※今回作成したファイルはGitHubで公開しています。