2014.04.08

こんにちわ！
山尾です！

今日は前回に引き続きSassのご紹介をしたいと思います！

 

前回は環境構築とざくっとした概要を説明させていただいたので今回はSassで出来る便利な記述法を紹介します！

目次

1. Compass
2. メディアクエリ
3. ファイルの統合

Compassを使う

 

Compassを使う一番の利点としてはベンダープレフィックスを簡単に書ける事ですね。
他にもCSSスプライトを自動で生成してくれるみたいです。

Compassインストールしインポートさせれば

.test{
  @include box-shadow( 0 0 10px #ccc);
  @include border-radius(4px, 4px);
  @include inline-block;
}

 コンパイル後↓

.test {
  -webkit-box-shadow: 0 0 10px #cccccc;
  -moz-box-shadow: 0 0 10px #cccccc;
  -ms-box-shadow: 0 0 10px #cccccc;
  box-shadow: 0 0 10px #cccccc;
  -webkit-border-radius: 4px 4px;
  -moz-border-radius: 4px / 4px;
  border-radius: 4px / 4px;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
}

ベンダープレフィックスだけではなくクロスブラウザにも対応してます。
Compassではその他たくさんのmixinが用意されています。

詳しくは公式ページをご覧ください。

 

 メディアクエリを便利に書く

レスポンシブデザインのコーディング時にもSassが活躍します！！

まずデバイスごとにブレイクポイントを記述します。

メディアクエリの分岐を定義するscssファイル

//デバイス定義
$type: xs sm md lg;
//media-query.scssをインポート。
@import "media-query";

/* スマホ
-------------------------------------------------- */
@media only screen and (max-width:766px) {
 $type: xs;
 @import "media-query"
}
/* タブレット
-------------------------------------------------- */
@media only screen and (max-width:750px) {
 $type: sm;
 @import "media-query"
}
/* PC(small)
-------------------------------------------------- */
@media only screen and (min-width:970px) and (max-width:1169px) {
 $type: md;
 @import "media-query"
}
/* PC(large)
-------------------------------------------------- */
@media only screen and (min-width:1170px) {
 $type: lg;
 @import "media-query"
}

media-query.scss(メディアクエリ毎のスタイルを記述するファイル)

#header{
 .navbar-nav{
 @if $type == xs {
 float: none;
 li{
 border-bottom: 1px solid #999;
 }
 }
 @if $type == sm{ 
 float: left;
 }
 @if $type == md or $type == lg{ 
 float: left;
 margin-bottom: 10px;
 }
 }
}
.imgBox{
 @if $type == xs {
 margin-bottom: 10px;
 }
 @if $type == sm{ 
 margin-bottom: 20px;
 }
 @if $type == md or $type == lg {
 float: left;
 }
}

これをコンパイルしたCSSが

/* スマホ
-------------------------------------------------- */
@media only screen and (max-width: 766px) {
 #header .navbar-nav {
 float: none;
 }
 #header .navbar-nav li {
 border-bottom: 1px solid #999;
 }
.imgBox {
 margin-bottom: 10px;
 }
}
/* タブレット
-------------------------------------------------- */
@media only screen and (max-width: 750px) {
 #header .navbar-nav {
 float: left;
 }
.imgBox {
 margin-bottom: 20px;
 }
}
/* PC(small)
-------------------------------------------------- */
@media only screen and (min-width: 970px) and (max-width: 1169px) {
 #header .navbar-nav {
 float: left;
 margin-bottom: 10px;
 }
.imgBox {
 float: left;
 }
}
/* PC(large)
-------------------------------------------------- */
@media only screen and (min-width: 1170px) {
 #header .navbar-nav {
 float: left;
 margin-bottom: 10px;
 }
.imgBox {
 float: left;
 }
}

ブレイクポイント毎に分かれてコンパイルしてくれるので可読性が上がります。

 

ファイルを統合

メディアクエリの記述ファイルや、mixinを記述ファイル変数の定義ファイルなど読み込むファイルの量が多くなってしまいます。

HTTPリクエストを減らすためにcssファイルにする際、ファイルを統合しHTTPリクエストを一回で済ませてやろうということが出来ます。

 

style.scssファイル（最終的にまとめてコンパイルするファイル）を用意します。

_mixin.scss
_medi-query.scss
_setting.scss
など統合したいファイルに_ を付けておきます。

@import "setting";
@import "mixin";
@import "media-query";

上記をstyle.scssファイルに記述しコンパイルするだけで統合されたcssファイルが作成されます。

以上、簡単にですが便利テクを紹介しました。

もっとmixinとかも紹介したいところですが長くなりすぎるのでまたいつかとさせていただきます。

それではよいSassライフを！

 参考サイト

 

【Sass】Sassでレスポンシブ！メディアクエリを便利に書こう。 | バシャログ。

CSSの常識が変わる！「Compass」、基礎から応用まで！ | 株式会社LIG