吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

sassの設計について

2014年9月29日 / category : sass

話題になり始めた頃は否定的な立場だったsass。
最も大きい理由のひとつはcssが汚くなる、という点。
web制作業界では、すでにsassで構築するのが当たり前になってきており、否定的な立場だからと言って「sassをやらない」というわけにもいかず、最初は渋々sassを触ってきたわけですが、ある程度経験を積むと、半端なくコーディングのスピードがアップすることが実感できました。

正直、cssの直書きなんてやってられなくなります。
否定的な立場だった人間が言う言葉ではないが、そこまで実感できちゃうわけです。

ただし、やはりcssは汚い。
これは、ある程度はあきらめる必要がありそうです。

で、現在、実際の案件で試しながら、sassの設計をどうすれば素敵になるか、模索中です。

僕が受注する多くの案件は、僕ひとりでコーディングする案件がほとんどで、誰かとチームを組んで案件を回すことはあまりありませんでした。
ところがつい最近、スケジュールが厳しく、外部の方にコーディングを手伝ってもらった案件がありました。
その方はsass対応ができないため、その方の担当部分は直接cssを書いてもらう、ということになりました。

メインでコーディングしている僕は、sassで。
特定のページのみコーディングしていただく方は、cssで。

「こういうケースは、これからもまだありそうだな」ということで、素敵なsassの設計を模索しよう。
ということで、今回試した設計を紹介したいと思います。
この設計がベストなのかはまだわかりませんし、これからもより素敵な設計を考えていきたいと思っています。

まず、sassフォルダに全てのsassファイルを格納。
その中に、次のsassファイルを格納する。

[sass]
_config.scss
_mixin.scss
■_config.scss
サイトの環境設定的なsassファイル
テキストリンクのカラー、ブレイクポイントの数値、コンテンツ最小幅・・・などをここで定義しておく。
SCSS – _config.scss
$breakPointList: 640px, 641px; //ブレイクポイント
$contentWidth: 940px; //コンテンツ幅
$defaultColor: #000; //デバイステキストカラー
$defaultLinkColor: #999; //テキストリンクカラー
$defaultHoverLinkColor: #333; //テキストリンクカラー(hover)

_config.scssは、こんな感じになります。

■_mixin.scss
ファイル名通り、mixinをまとめたsassファイル

次に用意するのは、libsフォルダ。
ここに、プラグイン用のsassファイルを格納します。

[sass]
_config.scss
_mixin.scss
[libs]
jquery.bxslider.scss

もちろんプラグイン用のsassが不要であれば、無しで。
jqueryの有名なライブラリbxsliderのsassファイルなどは、ここに格納します。

次に、reset用のsassファイル。これは、sassファイル直下に格納

[sass]
_config.scss
_mixin.scss
reset.scss
[libs]
jquery.bxslider.scss
■reset.scss
reset用のsassファイル
cssも独立して書き出す。/css/reset.cssなど。

次に、sassファイル直下にstyles.scssを格納。これは分岐するsassファイルを全てimportするsassファイルです。

[sass]
_config.scss
_mixin.scss
reset.scss
styles.scss
[libs]
jquery.bxslider.scss
■styles.scss
importするsassファイルをまとめるsassファイル
cssファイルに書き出す。/css/styles.cssなど。
SCSS – styles.scss
@import '_config';
@import '_mixin';
@import 'common/_common';
@import 'common/_header';
@import 'common/_footer';
@import 'page/_header';
@import 'page/_contents';

styles.scssは、こんな感じになります。

トップページのみ他のページとデザイン・レイアウトが異なる。というのは、よくある案件です。
そのため、トップ用のsassファイルを作ります。

[sass]
_config.scss
_mixin.scss
reset.scss
styles.scss
[top]
styles.scss
[libs]
jquery.bxslider.scss
■/top/styles.scss
トップページ専用のsassファイル。
cssも独立して書き出す。/css/top/styles.cssなど。

次に、サイト共通関連のsassファイルをcommonフォルダを作り、そこにまとめる。

[sass]
_config.scss
_mixin.scss
reset.scss
styles.scss
[top]
styles.scss
[common]
_common.scss
_header.scss
_footer.scss
[libs]
jquery.bxslider.scss
■/common/_common.scss
サイト全体で使用するパーツ的なsassファイル。
ボタン要素や、clearfix、見出しの装飾などなど。レイアウト的なcssはここには記述しない、あくまでもパーツ的な。ファイル名は検討の余地あり・・・commonが2回繰り返してしまっているので・・・。
styles.scssでimportする。
■/common/_header.scss
■/common/_footer.scss
先日担当した案件は、トップページと下層ページのヘッダー・フッターが共通だったので、commonフォルダに格納しました。
ファイル名通り、_header.scssはヘッダーのレイアウト用。_footer.scssはフッターのレイアウト用。トップページと下層ページで、フッター・ヘッターが異なるレイアウトの場合は、不要になる。
styles.scssでimportする。

次からが、下層ページのコンテンツ用のsassファイル群。
まず、pageフォルダを作り、そこにsassファイルを格納。

[sass]
_config.scss
_mixin.scss
reset.scss
styles.scss
[top]
styles.scss
[common]
_common.scss
_header.scss
_footer.scss
[page]
_header.scss
_footer.scss
_side.scss
_contents.scss
[libs]
jquery.bxslider.scss
■/page/_header.scss
■/page/_footer.scss
トップページと下層ページでヘッダー・フッターが異なる場合は、下層ページのヘッダー・フッターをそれぞれ_header.scss、_footer.scssに記述。さらに、コンテンツ内のヘッダー・フッターもここに記述する。
styles.scssでimportする。
■/page/_side.scss
下層ページでは、よく2カラムにして、サイドにナビゲーションを配置するケースが多いので、_side.scssを用意する。
styles.scssでimportする。
■/page/_contents.scss
下層ページのメインコンテンツのレイアウトを設定するsassファイルのimport用のsassファイル。
また、メインコンテンツの幅指定などの大枠はここで設定する。
styles.scssでimportする。
SCSS – /page/_contents.scss
@import 'contents/_about';
@import 'contents/_news';
@import 'contents/_product';
@import 'contents/_contact';

/page/_contents.scssは、こんな感じになります。

メインコンテンツ内のレイアウトは各ページ毎にレイアウトが異なりますので、基本的にページ毎にsassファイルを作成します。
ページ毎に作成したsassファイルを、_contents.scssがimportします。
contentフォルダを作成し、そこに全て格納します。

[sass]
_config.scss
_mixin.scss
reset.scss
styles.scss
[top]
styles.scss
[common]
_common.scss
_header.scss
_footer.scss
[page]
_header.scss
_footer.scss
_side.scss
_contents.scss
[contents]
_about.scss
_news.scss
_product.scss
_contact.scss
[libs]
jquery.bxslider.scss

_about.scss → 会社概要ページのメインコンテンツ
_news.scss → ニュースページのメインコンテンツ
_product.scss → 商品ページのメインコンテンツ
_contact.scss → お問い合わせページのメインコンテンツ
みたいな感じです。

デザインのレイアウトと照らし合わせてみると、次のようになります。

■トップページと下層ページで、ヘッダー・フッターが共通の場合
A サイト共通ヘッダー
/sass/common/_header.scss
B サイト共通フッター
/sass/common/_footer.scss
C トップページのコンテンツ
/sass/top/styles.scss
D 下層ページのメインコンテンツ
/sass/page/_contents.scss
E 下層ページのサイドコンテンツ
/sass/page/_side.scss
F 下層ページの共通ヘッダー
/sass/page/_header.scss
G 下層ページの共通フッター
/sass/page/_footer.scss
■下層ページのメインコンテンツ
Da 会社概要ページのメインコンテンツ
/sass/page/contents/_about.scss
Db ニュースページのメインコンテンツ
/sass/page/contents/_news.scss
Dc 商品ページのメインコンテンツツ
/sass/page/contents/_product.scss
Dd お問い合わせページのメインコンテンツ
/sass/page/contents/_contact.scss

こんな感じです。
例えば、サイトマップページが追加された場合は、

/sass/page/contents/_sitemap.scss

と、sassファイルを追加してあげれば良いわけです。

経験上、納品後しばらく経ってからページが追加された場合、cssの記述箇所を思い出すのが大変です。
このようにメインコンテンツ毎にsassファイルを分けておけば、追加したsassファイルのみ触れば良いわけです。

さらに、もしこのページだけsassができない方にお願いする場合は、

/css/page/contents/sitemap.css

と、cssファイルを用意してあげれば良いわけです。

他の方がどのような設計をしているかわからないので、どういう設計が素敵なのかわかりませんが、これがいまのところ、僕の中では、sassの素敵な設計となっています。
いかがでしょうか。

他の方がどのようなsassの設計をしているか、とても興味あります。。。