Compassを使ったオイシックスでの実例の紹介
最後に、オイシックスでの実例をご紹介します。オイシックスでは、デザイナーが利用するテスト機（Linux）にCompassを導入しています。CSSスプライト画像の生成とSassファイルのコンパイルをCompassで行い、フロントエンドビルドツールのGruntを利用して管理をしています。
オイシックスでのCompassプロジェクトの概要
まずconfig.rbの設定とプロジェクト構成を説明します。前述のとおりCompassではSassファイルのコンパイルとCSSスプライト画像の作成のみを行っているため、http_pathやjavascripts_dirの設定はコメントアウトしています。加えて、デプロイ先をcssフォルダにまとめています。cssフォルダはテスト機のドキュメントルートへのシンボリックリンクです。こうすることで、sassフォルダにSassファイルを配置した際に、CSSファイルがそのままテスト機で動作確認できて便利です。
config.rb
# デプロイされたときの設定を記載します #http_path = "/" css_dir ="css" sass_dir = "sass" images_dir = "sass" generated_images_path = "css" #javascripts_dir = "javascripts" # .sass-chacheを作成しない設定です cache = false # クエリストリングによるキャッシュ防ぐ設定です asset_cache_buster :none # 出力形式を設定します output_style = :compressed # 相対パス設定をいれるときはtrueを設定します relative_assets = true # CSSにコメントを入れる場合、trueにします line_comments = false
プロジェクトのファイル構成
次にSassファイル作成のルールについてです。現在、オイシックスのスマートフォンサイトでは1ページ1CSSを原則としています。1画面用のCSSファイルに対して、パーシャルで作成した共通のSassファイル（_○○.scss）をインポートして利用しています。
ログイン画面用Sassファイル（login.scss）
//日本語対応用にcharsetを入れる
@charset "utf-8";
//共通のSassファイルをインポート（_variable.scss, _reset.scss, _layout.scss, _base.scss）
@import "variable";
@import "reset";
@import "layout";
@import "base";
//個別のCSSを記載
/*
#ログインページ
*/
.login {
padding-bottom: $interval*3;
background-color: $colortype18;
}
.login__title {
margin-bottom: $interval*3;
padding: $interval*2;
font-size: $fontsize02;
font-weight: bold;
text-align: center;
color: $colortype01;
background-color: $colortype06;
}
.login__block {
margin-left: $interval*2;
margin-right: $interval*2;
margin-bottom: $interval*3;
padding: $interval*3 $interval*2;
background-color: $colortype01;
box-shadow: 1px 1px 3px $colortype14;
border-radius: $interval;
}
.login__block__title {
margin-bottom: $interval*3;
font-size: $fontsize04;
font-weight: bold;
color: $colortype06;
}
.login__input__wrapper {
margin-bottom: $interval*3;
border: 1px solid $colortype06;
border-radius: 3px;
}
.login__input__list {
padding: $interval*2 $interval;
box-shadow: 2px 2px 5px $colortype14 inset;
}
.login__input__list + .login__input__list {
border-top: 1px solid $colortype06;
}
.login__input {
-moz-appearance: none;
-webkit-appearance: none;
-o-appearance: none;
appearance: none;
width: 100%;
font-size: $fontsize04;
font-weight: bold;
border: none;
}
.login__checkbox__wrapper {
margin-bottom: $interval*2;
font-size: $fontsize03;
line-height: 1.3;
}
.login__checkbox__label {
display: block;
font-size: $fontsize03;
}
.login__btn--login {
-moz-appearance: none;
-webkit-appearance: none;
-o-appearance: none;
appearance: none;
box-sizing: border-box;
margin-top: $interval*3;
margin-bottom: $interval*3;
padding: $interval*2;
width: 100%;
font-size: $fontsize05;
font-weight: bold;
color: $colortype01;
background: linear-gradient(to bottom, #fff 0%, #faab26 6%, #f39800 100%);
border: 1px solid #c57c02;
border-radius: 3px;
}
.login__link {
margin-top:$interval*2;
text-align: right;
}
.login__link--block {
position: relative;
display: block;
margin-left:$interval*2;
margin-right:$interval*2;
padding: $interval*3 $interval*4 $interval*3 $interval*2;
font-size: $fontsize04;
font-weight: bold;
color: $colortype06;
background-color: $colortype01;
border: 1px solid $colortype06;
border-radius: 3px;
}
.login__link--block:after {
position: absolute;
content:"";
top:0;
bottom:0;
right: $interval*2;
width: 6px;
height: 6px;
margin: auto 0;
border-top: 2px solid $colortype06;
border-right: 2px solid $colortype06;
transform: rotate(45deg);
}
.login__rakuten-login__wrapper {
display: inline-block;
margin-right: $interval*4;
}
.login__yahoo-login__wrapper {
display: inline-block;
& div:first-child{
display:none;
}
& a:nth-of-type(2){
display:none;
}
& a img:first-child{
width:130px;
height:30px;
}
}
login.css
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{font-family:verdana,"メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"MS Pゴシック","MS PGothic",Sans-Serif;margin:0;padding:0;border:0;outline:0;font-size:1rem;vertical-align:baseline;background:transparent}html{font-size:12px}/*割愛*/.login__link--block:after{position:absolute;content:"";top:0;bottom:0;right:10px;width:6px;height:6px;margin:auto 0;border-top:2px solid #300;border-right:2px solid #300;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.login__rakuten-login__wrapper{display:inline-block;margin-right:20px}.login__yahoo-login__wrapper{display:inline-block}.login__yahoo-login__wrapper div:first-child{display:none}.login__yahoo-login__wrapper a:nth-of-type(2){display:none}.login__yahoo-login__wrapper a img:first-child{width:130px;height:30px}
オイシックスでSass、Compassを導入してよかったこと
良かったことはフロントエンドエンジニアのやる気が上がったことにつきます。もちろん、成果物の品質の向上といったそもそもの恩恵を享受していますが、何より効率よくCSSを記載するにはどうするのが良いのか考えるようになったのが大きいです。新しい技術を導入することでモチベーションの向上に繋がり、よい循環が生まれました。
まとめ
いかがでしたでしょうか。今回長期にわたって、Sass、Compassにあまり触れていない方を対象として、基本機能と導入事例を紹介させていただきました。Sass、Compassは現在、GruntやGulpなどのビルドツールと一緒に使うことが多くなっています。Gruntはオイシックスでも導入しており、うまく運用の乗せるために試行錯誤の真っ最中です。
今回の連載を通して、Sass、Compassの導入を検討していただけると共に、フロントエンド環境の改善に寄与できれば幸いです。
