PAGETOP

【CSS】コーディングが超絶早くなる！Sass（SCSS）を使ってみよう！実践編

2014年8月7日

【CSS】コーディングが超絶早くなる！Sass（SCSS）を使ってみよう！実践編

Sassの魅力、そして導入手順と２回にわたってご紹介してきましたが、今回はいよいよ実践編。Sassの一番大きなメリットと言えるMixinを中心に、効率的なコーディングを目指します。

基礎編おさらい

基礎編でご紹介した便利な機能についてもう一度軽くおさらいをします。

a.変数を使える

$を付けることで変数として扱え、プロパティ値を格納できます。
コードの使い回しがきく点と、計算ができるという点が便利です。
例：

$mgn:10px;
p{
margin:$mgn*2;   /*margin値は20px*/
}

b.ネストできる

入れ子にして記述することで、ソースがスッキリして見やすくなります。

header{
h1{
font-size:20px;
img{
float:left;
}
}
}

c.親セレクタを参照できる

疑似クラスに「&」を使って、親セレクタを参照することができます。

.btn{
background-color:orange;
&:hover{
background-color:yellow;
}
}

d.セレクタを継承できる

@extendを利用することによって、既出セレクタのコードを別のセレクタでそのまま使えます。

.box{
width:400px
border:#000000 1px solid;
}
.box02{
@extend .box;　　/*ここに、boxクラスのコードが展開される*/
background-color:#fffff;
}

以上、基礎編のおさらいでした。
ここからは、Sassの最大の魅力とも言えるMixinについてご紹介します。

１.自作Mixinを使う

基礎編でも触れた通り、使い方は、@mixinで定義したスタイルを、@includeを使って呼び出すというものです。使いまわしたいコードを一度定義しておけば、あとは使いたい場所でたった１行の呼び出しコードを記述するだけ。コーディングの時間を大幅に短縮することができます。

/*scss*/
@mixin box-blue{
border:#000000 1px solid;
background-color:blue;
text-align:center;
}
.box01{
@include box-blue;
width:300px;
}

/*コンパイル後のCSS*/
.box01{
border:#000000 1px solid;
background-color:blue;
text-align:center;
width:300px;
}

さらに、Mixinには引数を使うことができます。
例えば、背景色だけをボックスごとに変えたい場合、

/*scss*/
@mixin box($bgcolor){
border:#000000 1px solid;
background-color:$bgcolor;
text-align:center;
}
.box01{
@include box(yellow);　　/*背景色はyellow*/
}
.box02{
@include box (pink);　　/*背景色はpink*/
}

/*コンパイル後のCSS*/
.box01{
border:#000000 1px solid;
background-color:yellow;
text-align:center;
}
.box02{
border:#000000 1px solid;
background-color:pink;
text-align:center;
}

デフォルト値を設定することもできます。
/*scss*/
@mixin box-blue($bgcolor:blue){  /*背景色のデフォルト値はblue*/
border:#000000 1px solid;
background-color:$bgcolor;
text-align:center;
}
.box01{
@include box-blue(yellow);   /*背景色はyellow*/
}
.box02{
@include box-blue();    /*背景色はデフォルト値が適用される*/
}

2.Mixinのライブラリを使う

Mixinはライブラリとしてインターネット上でもたくさん公開されています。完成度が高いものが多いので、積極的に利用しましょう。以下に、実用性の高そうなものをいくつかご紹介します。

1.Compass

http://compass-style.org/
SassのMixinライブラリと言えばこれ、というくらい多くの人に愛用されています。ターミナルまたはコマンドプロンプトからのインストールが必要ですが、導入する価値はあります。
Compassキャプチャー

2.Bourbon

http://bourbon.io/#compact
Compassよりもシンプルで軽量ながら、実用性はしっかり押さえたライブラリ。
Compassと比べて、用途で使い分けてもいいですね。
Bourbonキャプチャー

3.nonakaryuichi「scss_media_queries」

https://github.com/nonakaryuichi/scss_media_queries
面倒なメディアクエリー対応をほんの数行で記述してくれる国産Mixin。オプションも豊富で、レスポンシブサイトのコーディングに重宝します。
nonakaryuichi

4.CSS-TRICKS「Mixins for Rem Font Sizing」

http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/
CSS3から使える新しい単位remでフォントサイズ指定するMixinです。相対指定のemや％とは違って、html要素のフォントサイズを継承するので、親の影響を受けず、フォントサイズの指定ができます。
CSS-TRICKS

5.Animate Mixin for Compass/SASS

http://thecssguru.freeiz.com/animate/
様々なCSSアニメーションを手軽に実装できるMixin。サンプルも豊富に用意されています。
Animate Mixin for Compass/SASS

さいごに
Mixinを使用できるSassは、コーディングが楽になるというだけでなく、生成されたCSSにはコーディングミスがないということもまた大きなメリット。ちょっとしたスペルミスで時間を費やしてしまう、ということがありません。
導入や学習にかかるコストがゼロというわけではありませんが、得られるメリットを考えれば微々たるものです。
ぜひ一度、Sassの便利さを実感してみてください。

CSSについて, WEBデザイン