最近の案件でのSassの運用

今進めている案件で、Sass + YUIを使っています。

どんな感じに運用しているかを紹介するとともに、自分用のメモとしてまとめておきます。

SCSSファイルの全容

_yui-reset.scss

_yui-reset.scss は、YUI 3 CSS Resetをファイル名と拡張子だけ変更したファイル。

_yui-customized-fonts.scss

_yui-customized-fonts.scss は、YUI 3 CSS Fontsを日本語フォントを考慮してカスタマイズしたファイル。

_yui-fonts-map.scss

_yui-fonts-map.scss は、YUI 3 CSS Fontsのパーセントとpx数の対応を変数にしたファイル。

_utility.scss

_utility.scss は、clearfixなどのサイト共通で使用するユーティリティスタイルをまとめたファイル。

_common.scss

_common.scss は、サイト共通で使うCSSをまとめたファイル。

_page-name.scss

_page-name.scss は、各ページ固有のCSSをまとめたファイルで、ページの数だけある。

style.scss

style.scss は、style.cssに変換するファイルで、上記すべてをインポートするファイル。

_yui-customized-fonts.scss

/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
*/
/*
customize for japanese fonts.
author: taiju
version: 1.0
date: 2011.7.10
*/
/**
* Percents could work for IE, but for backCompat purposes, we are using keywords.
* x-small is for IE6/7 quirks mode.
*/
body {
font:13px/1.231 "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",arial,helvetica,clean,sans-serif;
*font-size:small; /* for IE */
*font:x-small; /* for IE in quirks mode */
}

/**
* Nudge down to get to 13px equivalent for these form elements
*/
select,
input,
button,
textarea {
font:99% "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",arial,helvetica,clean,sans-serif;
}

/**
* To help tables remember to inherit
*/
table {
font-size:inherit;
font:100%;
}

/**
* Bump up IE to get to 13px equivalent for these fixed-width elements
*/
pre,
code,
kbd,
samp,
tt {
font-family:monospace;
*font-size:108%;
line-height:100%;
}

*:first-child+html * {
font:13px/1.231 "メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",arial,helvetica,clean,sans-serif;
}

* html * {
font:13px/1.231 "メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",arial,helvetica,clean,sans-serif;
}

_yui-fonts-map.scss

/* mapping yui-fonts px and % */
$f10px: 77%;
$f11px: 85%;
$f12px: 93%;
$f13px: 100%;
$f14px: 108%;
$f15px: 116%;
$f16px: 123.1%;
$f17px: 131%;
$f18px: 138.5%;
$f19px: 146.5%;
$f20px: 153.9%;
$f21px: 161.6%;
$f22px: 167%;
$f23px: 174%;
$f24px: 182%;
$f25px: 189%;
$f26px: 197%;

_utility.scss

.clearfix {
  \zoom: 1;
  &:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
  }
}

/* 他はサイト固有で使い回す変数とか、クラスとか */

_utility.scssは、もっと経験積んで増やしていけると良い。

_common.scss

#header {
  ...
}
#container {
  ...
}
#footer {
  ...
}

_page-name.scss

body.page-name {
  ...
}

style.scss

@import "yui-reset.scss";
@import "yui-customized-fonts.scss";
@import "yui-fonts-map.scss";
@import "utility.scss";
@import "common.scss";
@import "page-name.scss";
...

最終的に

sass -t compressed --watch scss:css

後はフォルダ単位で監視してひたすら更新する。

scssフォルダはサーバーには転送せず、ローカルにしか置かない。

こんな感じやってます。