「Web制作者のためのSassの教科書」をいただきました

2013-10-172023-01-13

1ヶ月ぐらい前になりますが、著者の平澤さん・森田さんより「Web制作者のためのSassの教科書」をいただきました。ありがとうございます！

実はSassの教科書には以前Webデザインのタネで書いたEmEditorでSassを開く場合の一通りの設定が306ページに紹介されています。初めての体験でびっくりです＞＜

平澤さんの記事を読んでSassデビューして、それからほぼ毎日Sassを使い続けています。そんな僕が読んだ、Sassの教科書の読みどころを紹介していきます。

可変長変数 $value…（133ページ）

最初読んだときは、なんのこっちゃと思ってましたが@mixinで「,」の付いた値を引数に使うときには、このような形で値を渡すと、エラーが出てしまいます。

@mixin shadow($shadow_value) {
box-shadow: $shadow_value;
}
.boxA {
@include shadow(0 0 1px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.5));
}

↓

エラー

なんでこんなエラーがでるのかというと、「,」で区切られてしまって、それぞれが個別の値として見られているのに、@mixin側で@mixin shadow()のカッコの中は一つの変数しか受け入れられないから起こっていることです。

そこで可変長引数を使います。名前はともかくとして、書き方は引数を指定する箇所に「…」と入れると可変長引数になります。

@mixin shadow($shadow_value...) {
box-shadow: $shadow_value;
}
.boxB {
@include shadow(0 0 1px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.5));
}

↓

.boxB {
box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.5);
}

CSS3のプロパティではbox-shadowやtext-shadow、background-imageを複数指定するときに「,」を使う機会は増えてきました。今はそこまで@mixinに使う機会はなさそうですけど、今後@mixinを作るときにエラーが出てしまったら思い出したいことですね。

@content（137、241ページ）

名前だけは知ってたけど、恥ずかしながら使ったことがありませんでした。機能が出たときはまだピンと来なかったんですね…。

@mixinはプロパティと値をセットにしたものを出力するのに対して、@contentは{}の外のメディアクエリーやセレクターの部分を出力するものです。使いどころが少しわかってきたのでメモ。

僕は直近の案件でメディアクエリーをこのような書き方をしてました。

body {
font-size: 12rem;
@media screen and (max-width: 768px) {
font-size: 16rem;
}
h1 {
font-size: 24rem;
@media screen and (max-width: 768px) {
font-size: 18rem;
}
}
}

この方法だと、何回も@media～とその都度何回も書かないといけないし、加えてブレークポイントを変更しようといった場合にファイルの全置換が必要です。今まで僕はEmmetに任せてましたが、やっぱり心許ないです。

そこで@contentの登場です。

@mixin media768 {
@media screen and (max-width: 768px) {
@content;
}
}
body {
font-size: 12rem;
@include media768 {
font-size: 16rem;
}
h1 {
font-size: 24rem;
@include media768 {
font-size: 18rem;
}
}
}

@mixin media768でCSSの「何に」という部分を指定し、中身を@contentでという形で定義します。

そして、メディアクエリーを出力する時には@include media768{}を書いて、その中でプロパティと値を指定します。

これでコンパイルをすると、次のような結果になります。

body {
font-size: 12rem;
}
@media screen and (max-width: 768px) {
body {
font-size: 16rem;
}
}
body h1 {
font-size: 24rem;
}
@media screen and (max-width: 768px) {
body h1 {
font-size: 18rem;
}
}

メディアクエリーでの例になりましたが、単純にセレクターに対して指定をすることもできるので、同じセレクターを何度も書かなければいけないときには活躍しますね。

CompassのUtilities・Typographyモジュールは便利な@mixinがいっぱい（264ページ）

英語のリファレンスだとピンと来なかった部分も、日本語で書かれているとやっぱりわかりやすいです。実務で使えるんじゃないかと思ったのはこの6つです。詳しくは書籍やCompassのリファレンスで。

@include inline-block-list	IEハックも含めたインラインブロックリストを出力
@include horizontal-list	横並びリストを出力
@include contrasted	背景色に応じて文字を黒にするか白にするかを出力
@include min-width	min-widthとIEハックバージョンの幅出力
@include min-height	min-heightとIEハックバージョンの高さ出力
@include opacity	透明度のopacityと、IE用のフィルターを出力

下3つはIE7を無視したサイトならとくに@includeを使う必要がないかもしれませんが、自動的にIE用に別途スタイルを書いてくれるのもありがたいですね。

英語のリファレンスは画面の左側がメニューになってるになっているので、そっちを見てコードを見ていくと全体感がわかりやすかったです。

Compassのヘルパー（275ページ）

Compassのヘルパーはimage-width()とかimage-height()みたいな便利なものもありますが、これ知っておけばもっと省力できた！っていうのがセレクター系のヘルパーです。

headings関数

h1, h2, h3, h4, h5みたいに連続する見出しにスタイルを当てることが多いので、ないかなーと思ってたのですが、やっぱりありました。インターポレーション「#{}」を使って文字列として認識してもらう必要はありますが、@mixinを作るときには使えそうですね。

#{headings()} {
color: #000;
}

↓

h1, h2, h3, h4, h5, h6 {
color: #000;
}

引数がないとh1～h6まで全部入ります。引数を入れると、範囲も固定できるというあたりは何か使い道が増えそうなヘルパーです。

#{headings(2,5)} {
color: #000;
}

↓

h2, h3, h4, h5 {
color: #000;
}

elements-of-type関数

もう一つ、セレクター系で覚えておこうと思ったのがこちらのelements-of-type関数です。引数でブラウザのdisplay:blockとされているような要素全部を選択できたり、display:inlineとされているような要素をセレクタとして出力します。

#{elements-of-type("block")} {
color: #000;
}

↓

address, article, aside, blockquote, center, dir, div, dd, details, dl, dt, fieldset, figcaption, figure, form, footer, frameset, h1, h2, h3, h4, h5, h6, hr, header, hgroup, isindex, menu, nav, noframes, noscript, ol, p, pre, section, summary, ul {
color: #000;
}

ちょっと変わったところで、display:table-cellとしている部分もこのようにセレクターとして利用することができるようです。

#{elements-of-type("table-cell")} {
background: #000;
}

↓

th, td {
background: #000;
}

table-cellはともかく、これまでブロック要素・インライン要素と考えていたものを一発で引き出せるのは便利ですね。HTML5以前の要素も入っているのがちょっと気になりますが、何かの表示が崩れてしまったときなどに検証用として使うには便利だと思います。

#{elements-of-type("block"), elements-of-type("inline")} {
outline: 1px solid #F00;
}

↓

address, article, aside, blockquote, center, dir, div, dd, details, dl, dt, fieldset, figcaption, figure, form, footer, frameset, h1, h2, h3, h4, h5, h6, hr, header, hgroup, isindex, menu, nav, noframes, noscript, ol, p, pre, section, summary, ul, a, abbr, acronym, audio, b, basefont, bdo, big, br, canvas, cite, code, command, datalist, dfn, em, embed, font, i, img, input, keygen, kbd, label, mark, meter, output, progress, q, rp, rt, ruby, s, samp, select, small, span, strike, strong, sub, sup, textarea, time, tt, u, var, video, wbr {
outline: 1px solid red;
}

Compass Recipes（296ページ）

個人的に「お！」と思ってしまったのがCompass Recipes（レシピ）。
Compassからさらに拡張して、これからWeb制作で使うであろうGoogle WebFontsやアイコンフォント、背景でよく目にするパターンが@includeや@extendするだけで簡単に出力できる@mixin集といったところです。

実務で使う際には検証したりとか、どんな値が動いてるのか、どんなCSSを出力するのか、軽く見ておく必要はあると思いますが、使いこなせたら便利な拡張になりそうです。

これは一度コード読んでおきたい・・・！