MacでSCSS/Compass

Posted on 2014.03.10

develop
css

最近SCSSやら使ってデザインやってたりするわけですが、これがなかなか便利で今になってみると使ってよかったと思ってます。

“なんかよくわからないけどCSSコーディングそのものとかその前段階としての設計が楽になるらしい”みたいなことで試してみたSCSSですが、今ではないと困るぐらいのレベルまで来ていたので、後々振り返れるようにアウトプット。

こういったスタイルシート言語は既にいろいろあって、CSS関連の記事を調べていて目にしたことがあるという方もおられると思います。そういったスタイルシート言語な記事を読んでいて、パッと見では「なんだこの構文はぁ！？」という感じがしますが、「とにかくやってみようぜぇ……」という感じで試せたらなぁと。

SCSSコーディングの導入にはいろんな方法がありますが、”Macで”ということなのでターミナルを使って「せっかくだから俺はこの黒い画面を使うぜ」という感じの導入手順は以下のサイトを参考にしました。

Macのターミナルから Sass + Compass をインストールして使うまでの簡単な手順メモ | memobits

インストール

ターミナルを立ち上げ、

sudo gem install sass

で、Sassをインストール

sudo gem install compass

で、Compassがインストールされます。

プロジェクトの作成

同じくターミナルでプロジェクトを作りたいディレクトリに移動。例えばユーザーhogeのfugaディレクトリ

hoge/fuga/

をプロジェクトのルートにしたいなら……

cd hoge/fuga/

現在地がわからなければ、

cd

でホームディレクトリに戻ってからcd hoge/fuga/で良いでしょう。

そこで

compass create

これで User/hoge/fuga/ ディレクトリがプロジェクトのルートに設定され、SCSS/Compassでのページ構築に必要なディレクトリが用意されました。

fugaディレクトリの中

config.rbの設定

作られたファイル群の中にconfig.rbというのがありますが、これをエディタで開きます。

細かいことは抜きにしてまず注目すべきはこの部分。

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

これは必要な各種ディレクトリの場所と名前を指定する記述になります。

自分のはこんな感じになってます。

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"

実際のfugaディレクトリの中も併せて変更しておきましょう。

fugaディレクトリ中その2

sass/ie.scss IE用の記述
sass/print.scss 印刷用の記述
css/ie.css IE用の記述（CSS出力後）
css/print.css 印刷用の記述（CSS出力後）

は、プロジェクト的に必要なければ削除しても構いません。必要になれば新たに作りなおすこともできます。

スクリーン用CSSしか使わないのであれば、HTMLファイルからはcss/screen.cssだけをリンクすれば良いということになります。

SCSSファイルの監視とビルド

ターミナルでプロジェクトルート(ここでは/User/hoge/fugaディレクトリ)にいる状態で

compass watch

と入力。”>>> Compass is watching for changes. Press Ctrl-C to Stop.“と出てきたら、sassディレクトリ内の.scssファイルがコンパイルされ、cssディレクトリ内に同名のcssファイルを吐き出します。以降Ctrl+Cをターミナル上で入力したり、ターミナルそのものを終了するまで監視が継続されますので、.scssファイルが更新され次第、.cssファイルが更新されます。

ちなみにscss/screen.scssの最初に書かれている

@import "compass/reset";

は、”Compassが用意しているCSSリセット用の記述を読み込み、CSSに出力する”もので、この時点でcss/screen.cssにreset関連の記述が列記されていると思います。

SCSS/Compassの恩恵

ここで終わってしまうと、「何のためにCompass入れたん？何のためにSCSSで使うん？」という話になってしまいますので、簡単にSCSS/Compassの恩恵をご紹介。

box-shadowを使う(Compassの恩恵)

本来であれば”下に2px、右に2px、ぼかし5px、色が#000000のbox-shadow”は、

.foo {
	-webkit-box-shadow: 2px 2px 5px #000;
	-moz-box-shadow: 2px 2px 5px #000;
	box-shadow: 2px 2px 5px #000;
}

とするのが通常の書き方となりますが、これをCompassで行う場合、sass/screen.scssの冒頭部

@import "compass/reset";

に、@import “compass/css3”;を追加

@import "compass/reset";
@import "compass/css3";

これでCompassにCSS3の記述サポートを読み込ませます。

続いてセレクタ内に@include box-shadow(2px 2px 5px #000);を記述

.foo {
	@include box-shadow(2px 2px 5px #000);
}

コンパイルされたcss/screen.cssには

.foo {
	-webkit-box-shadow: 2px 2px 5px black;
	-moz-box-shadow: 2px 2px 5px black;
	box-shadow: 2px 2px 5px black;
}

が、追記されます。便利ですねぇ。

その他Compassの機能やヘルパーはCompass Core Framework | Compass Documentationで確認できます。

継承の記述(SCSSの恩恵)

本来CSSでは、

.foo {
	width: 200px;
}

.foo .bar {
	position: relative;
	background: #fff;
}

.foo .bar.baz {
	text-align: center;
}

等のように都度セレクタにクラス等を追記することになりますが、上記の記述はSCSSでは以下のように書くことができます。

.foo {
	width: 200px;

	.bar {
		position: relative;
		background: #fff;

		&.baz {
				text-align: center;
		}
	}
}

継承を階層構造で書くことができるため、文字数を減らすことはもちろん、後でソースを見直す際にも見やすくなります。

mixinと変数を使う(SCSSの恩恵)

“いろいろな箇所で使い、装飾がほぼ同じだが、背景だけ場合によっては変えたい”ボックスは、本来

.foo {
	width: 200px;
	margin: 10px;
	padding: 5px;
	background: #fff; // 他は共通だがここだけ変動
}

.bar {
	width: 200px;
	margin: 10px;
	padding: 5px;
	background: #ccc; // 他は共通だがここだけ変動
}

と、書くことになりますが、mixin形式で共通箇所を書き、変更が必要な部分だけ$を用いた変数で対応することもできます。

@mixin box-base($bg-color: #fff) {
	width: 200px;
	margin: 10px;
	padding: 5px;
	background: $bg-color;
}

.foo {
	@include box-base;
}

.bar {
	@include box-base($bg-color: #ccc);
}

順に説明しますが、

@mixin box-base

基本となる記述(mixin)に”box-base”という命名をします。

($bg-color: #fff)

変数”bg-color”を作成し、そのデフォルトの値を”#fff”に設定するという記述

background: $bg-color;

ですから、backgroundのデフォルトの値は、何もしなければ”#fff”です。

@include box-base;

先ほど設定したbox-baseというmixinを呼び出し、中身を展開します。

@include box-base($bg-color: #ccc);

先ほど設定したbox-baseというmixinを呼び出し、かつ中に記述されている変数$bg-colorをデフォルトの値ではなく”#ccc”に変更するという記述になります。

その他、基礎部分の詳細などは、

などを参考にしてみると良いと思います。