最近お仕事でsassを使ってサイトを構築してます。 今まで個人で触る時はファイルの管理が煩雑だったので、改めて自分なりに整理してみました。 今回はその際のディレクトリ構成や設定などをメモ。

ファイル構成について

主なscssファイルは main.scss/mixin.scss/var.scssの3つ 必要に応じてmain.scss以外にもファイルを作りました。

mixinはmixin.scss 変数はvar.scssに入れて管理。 mixin、変数を別ファイルに分けておけば、どのファイルでも同じものを参照できます。

scssファイル内で他のscssファイルを参照するには

@import “ファイル名”;
と記述。

そうすると他のファイルからそのファイルを参照できます。 ちなみにファイル名のアンダースコアはなくても呼び出せるのでお好みで。

ファイル名の先頭にアンダースコアをつけるとコンパイルをせずに済みます。 なので上の場合、実際cssにコンパイルされるのはmain.scssのみです。

config.rbについて

config.rbの中は以下のような設定にしました。 ~~~ html

httppath = “/” cssdir = “css” sassdir = “scss” imagesdir = “img” javascripts_dir = “js”

outputstyle = expanded relativeassets = true line_comments = false ~~~ 最初の5行は、それぞれのファイルのディレクトリを指定しています。 compassでcreateしたときのデフォルトだとフォルダ名が長いのでそれぞれ変更。

output_style

expanded、nested、compact、compressedの4種類があります。

expanded:一般的な記述(インデント、改行がちゃんと入る) nested:ネストを継承した形 compact:1セレクタごとに1行で表示 compressed:改行、コメントアウトをすべて取った形

状況によって使い分ける必要がありますが、今回はexpandedで書き出しました。

relative_assets

compassでスプライト画像を書き出す際などに、書き出すパスをルートパスにするか、相対パスにするかを設定できます。 trueだと相対パス、falseだとルートパスで書き出します。

line_comments

trueにすると、コンパイルしたファイルに、この記述がscssファイルの何行目に書いてあるかというコメントが入ります。 今回はコンパイルした際余計なコメントは除きたかったためfalseに。

まとめ

今まで個人でサイトを構築する際にsassを使う場合はそこまで気にしなくても何とかなったんですが やはり構築する量が増えるとしっかりとしたファイル構成を考える必要があるなと痛感。 特に今回はmixinと変数をしっかりと考え、よく使用する記述をまとめてなるべく簡略できるように心がけました。

今後は自分なりの変数のテンプレートを作るのと、使えるmixinを書き溜めて より効率よいコーディングが出来るようにしたいですね。