CSSフレームワーク「Foundation 5」をSass（SCSS記法）で使う

声出し担当のmususこと、セイノススムです。

我が家に荷物を配達してくれる配達員の方々に「キヨノ様でよろしいですか？」と聞かれます。
今日も二件の郵便物があったのですが、赤い帽子の配達員さんも、黒い猫の配達員さんも、揃って「キヨノ様ですか？」と仰られます。
黒い猫の配達員さんに関しては、「あ、はい。セイノです。」と言ったにもかかわらず、「キヨノさんにお荷物です。」と仰られます。

みなさんCSSフレームワークは使っていますか？
team LENSでは基本的にFoundation 5というCSSフレームワークを利用して、制作を行います。
一人でやっていた時は、twitter社が開発したBootstrapや、Yahoo!社が開発したPureを利用していたのですが、これを気に一人で制作を行う時もFoundation 5を利用するようになりました。

Foundation 5は、Sassで開発されているので、CSSをSass（SCSS記法）で書いている人にはオススメのCSSフレームワークです。

そんなFoundation 5をSassで利用する時の、書き方を備忘録のように記事にしたいと思います。

好きなclass名にgridをあてる

通常であれば下記のように記述をしてgridを指定して実装しますが、mixinを利用する事で自分の好きなclass名で同様の効果が得られます。
CSSのマルチクラス設計は、再利用しやすくなり保守性が向上するがBEMなどの命名規則でclass名を指定したい人にとってはとても便利です。

通常

HTML

<div class="row">
<div class="small-2 large-4 columns">...</div>
<div class="small-4 large-4 columns">...</div>
<div class="small-6 large-4 columns">...</div>
</div>

Sass

HTML
<div class="sushi">
<div class="sushi__kohada">...</div>
<div class="sushi__engawa">...</div>
<div class="sushi__kanpachi">...</div>
</div>

Sass
.sushi {
@include grid-row();
&__kohada {
@include column(4);
@media #{$small-only} {
@include column(2);
}
}
&__engawa {
@include column(4);
@media #{$small-only} {
@include column(4);
}
}
&__kanpachi {
@include column(4);
@media #{$small-only} {
@include column(6);
}
}
}

rowを入れ子にする

rowを入れ子にする場合は特別な書き方がある。
兎にも角にも「入れ子の時はこう書くのだ！」と覚えれえば問題なし。

HTML

<div class="sushi">
<div class="sushi__ikura">
<div class="sushi__ikura__shari">...</div>
<div class="sushi__ikura__nori">...</div>
</div>
<div class="sushi__uni">...</div>
</div>

Sass
.sushi {
@include grid-row();
&__ikura {
@include column(8);
@include grid-row($behavior: nest);
&__shari {
@include column(11);
}
&__nori {
@include column(1);
}
}
&__uni {
@include column(4);
}
}

文字の大きさはrem-calcで指定する

文字の大きさ指定はrem-calcを使います。
これはemやremと同じようなモノだと考えればいいでしょう（多分）。

カッコの中の数値はピクセルで指定したい大きさにすれば、よしなにしてくれます。

Sass

.sushi {
font-size: rem-calc(12)
}

ということで無事に記事を書き終えたので寝ます。