まずは見た目。こんなんです。

実物はこの記事の下の方にあるのでそちらを見てもらえれば良いかと思うのですが、とりあえずキャプチャはってみますね。右側の赤字部分はそこのhtmlソースです。

意味的に正しいマークアップかとか厳しい目で見ると多分「1.コンピューターのある暮らし」とかはh要素使った方が良いかもしんないです。まぁまぁそれは置いておいて、今回はOLを入れ子にした時に親の番号を引き継いでその階層ごとに連番ふりたいってお話。

サンプルページ

上のソースのままだと、ちょっと分かりにくいのでとりあえずサンプルページ作りました。

>> 入れ子OLリストにCSSのカウンタで番号を振る方法　サンプルページ

OLの入れ子は３段階にしたサンプル。htmlソースとcssソースは下記の通りです。

<ol>
  <li>テキスト１
    <ol>
      <li>入れ子１段階目テキスト１</li>
      <li>入れ子１段階目テキスト２</li>
    </ol>
  </li>  
  <li>テキスト２
    <ol>
    <li>入れ子２段階目テキスト１</li>
    <li>入れ子２段階目テキスト２
      <ol>
        <li>入れ子３段階目テキスト１</li>
        <li>入れ子３段階目テキスト２</li>
        <li>入れ子３段階目テキスト３</li>
      </ol>
    </li>
    <li>入れ子２段階目テキスト３</li>
    </ol>
  </li>
</ol>  

ol{
	counter-reset:item;
	list-style-type:none;
	}
li:before{
	counter-increment:item;
	content:counters(item, "-")". ";
	}

CSS解説

やってる事はCSSのカウンタ使ってcontentsプロパティでカウンタの値を連番にして出力しましたってだけの話なんですが、せっかくなのでもう少し丁寧に見ていきますね。見たくなくてもせっかくだからゆっくりしていってね！

counter-reset を使ってカウンタの値をリセットする。

「counter-reset」プロパティは、カウンタの値をリセット(初期化)するためのプロパティです。書き方はこんな感じ。

counter-reset : 「カウンター名」 「リセット値」;

値の「カウンター名」には任意の名前を入れます。上のサンプルページでは「item」としています。一応この値は「カウンター名」か「none」を入れるようになっているのですが、「none」にする使い道が浮かばないので、とりあえずカウンター名を入れると覚えておけば良いかと。

「リセット値」は任意の値を指定できます。省略した場合は「0」になります。負の数値も指定出来ます。サンプルでは「0」にしたいだけだったので省略しています。

CSSのカウンタというのは、まぁなんていうか、いわゆる「変数」ですね。

ちなみにですが、カウンタによって番号が振られるのがli要素(の前)なのでli要素に「counter-reset」プロパティをセットしてしまいがちですが、あくまでリセットするのは「ここでリセットしておきたい」という要素です。だからここではol要素に「counter-reset」をセットしています。

counter-increment を使ってカウンタの値を更新する。

変数である以上、中身の値が変える事が出来ます。値の中身の数を更新するのに使うのが「counter-increment」プロパティです。

counter-increment : 「カウンター名」 「更新する値」;

「カウンター名」には先ほどリセットした名前と同じものを指定します。カウンタを更新しない時のために「none」値を入れる事も出来ます。

「更新する値」は更新する数を指定します。省略した場合は「1」になります。0や負の数値も指定できます。

counters 関数を使って値を出力する。

さて、本題の入れ子OLリストに連番を振るのですが、「contents」プロパティを使ってli:before疑似要素に連番を当ていきます。その際に使用するのが「counters」関数です。

今回はカウンタも入れ子にしたいから「counters」関数を使いますが、似たような関数で「counter」関数というのもあるのです。そちらは入れ子とか関係ない時に使います。これについては後ほど書きます。とりあえず今はcounters 関数のお話。

content : counters( カウンター名 , "区切り文字", list-style-type)　"後に続く文字等";

ちょっとややこしいんですけれども、サンプルでは

content : counters(item, "-")". ";

としています。「item」という名前のカウンタを「-」で区切って、番号の後に「. 」を入れるといった感じの指定です。区切り文字は何でも良いです。「.」にして「1.1.2」みたいな形でも良いですし、日本語でも大丈夫です。

list-style-typeの部分は省略しても大丈夫です。サンプルでは省略しています。使用する場合は「content : counters(item, "-" ,upper-roman)". ";」のように、list-style-typeで指定できる値ならどれでも使えます。upper-roman を指定すれば「Ⅰ-Ⅰ-Ⅱ.」のような表示になりますし、squareなら「■-■-■」のようになります。

ついでなので counter 関数の書き方も確認しておきます。

上でチラっと書いたのですが、counter関数というのもあります。こちらは入れ子状態のものには使えませんが、並列の関係の要素をカウントしていって出力するのに使います。

content : counter( カウンター名)　"後に続く文字等";

予め「counter-reset」や「counter-increment」の指定が必要なのは同じですが、こちらはcounters 関数よりシンプルで、単に任意のカウンター名でカウントしている変数の中身の数字を出力します。

"後に続く文字等"と上には書きましたが、「counter(カウンター名)」の前にも""で括った文字列を入れる事が出来ます。例えばこんな感じで使います。

>> counter 関数を使ったサンプル

<p>あああああああああああ</p>
<p>いいいいいいいいいいいいい</p>
<p>うううううううううううううう</p>
<p>えええええええええええええ</p>
<p>おおおおおおおおおおおおおおお</p>

body{
	counter-reset:sample; 
	}
p:before{
	counter-increment:sample; 
	content:"これは「" counter(sample) "」行目です。";
	}

いきなりソースを読み書きすることへの不安

各言語入門書を読めばそりゃ丁寧な解説で変数やら配列から始まり関数の説明があり、何か作ってみようぜーって流れになって…、と今まで少しでもプログラムに触れてたり、プログラマ的な考え方が出来る人ならそれで大丈夫だと思います。

が、しかし、本当に今までプログラミングとかまったく触ってこなかった人にいきなりあの英数字の羅列を見せるのは無理だろう、途中まではいい、だが「あの壁」の向こう側へはいきなりいけないだろう、という勝手な思い込み(おせっかい)で、入門の入門の入門くらいの本はないんかなと思い、探しだした至高の１冊。それがこちら。

正直、私がもっと早くにこの本に出会いたかった

以前「PHPを勉強する事についてデザイナが思う事。」という記事を書いたのですが、この段階の前にこの本を読んでいたら無駄に回り道がなかったんじゃないかと思います。

上記記事内でも書いているんですが、作りたいものがないまま勉強を進めてしまったばかりに「で、その次は？」という壁が出てくる。やっぱりこれが作りたいから作り方を調べる=勉強するっていう段取りでいかんと、なかなかうまくいかないんですよね。その壁の事を私は「あの壁」と呼んでいるのですが、私のように作りたいものが決まってないまま「勉強する」ってことだけに執着していると本当に「あの壁」を超えるのは大変でした。

この本の魅力

実はこの本は改訂版なのですが、それでも発売日は2008年なんですね。古くて内容的に心配という方もいらっしゃるかもしれないですが、大丈夫です。なぜならソースコードってものはほとんど書かれていないから。本当に「入門の入門の入門」って感じの内容なので、ほとんどの部分はプログラミングをするにあたっての基本的な考え方の本なんです。だから基本的に古くなるものがない。

具体的な内容は下記に目次を掲載しますが、言語に沿った解説本ではないです。特定の言語に対しての知識を深めたいんや～って人向けの本ではないです。ほんとにこれからプログラミングを１から始めたい人、１度挑戦したけれども挫折してしまった人、「あの壁」が越えられない人…そんな人に読んでほしい１冊です。

プログラミングを挫折した人へ

特に１度挑戦したけれども挫折してしまった人には「Chapter 3　日本語でプログラムを書こう」をおすすめします。自分もそうだったんですけれども、挫折してしまったのは多分この章に書かれている考え方が出来てなかったから。

さっきの記事内にも書いたのですが、難しく考え過ぎず、日本語で処理の道筋を考えるということがめっちゃくちゃ詳しく書かれています。その考え方さえ出来れば、その日本語で考えた筋道をプログラミングの言語に翻訳してあげるだけっていうのがよくわかる章です。

その後は自分が作りたいものを決めて、書かれている通り、日本語でどういう順序で命令を出したらいいかを考える、あとはそれを翻訳するだけ。ほんとにやってみるとなんで悩んでいたんだろうって思います。

言いにくい事を言っちゃう系

言いにくい事＝これ言ったら相手の気分を害するかなぁという時にワンクッション置くフレーズ。具体的には「そっちのミスなんですが」「マジ迷惑なんですけど」とか言いたい時に。文頭に置いてこちらの指摘を「責め(攻撃)」と露骨に捉えられないように、柔らかくして伝える。

基本的にはメールで怒っちゃだめだと思う。イライラしたり、明らかに自分に不利益が被る場合でも、とりあえずは素直に読んでもらえる体裁で文章を書いて、キチンと相手に伝わるように心掛ける。

自分も悪かった点はあるんで責めてるんじゃないですよ、と。

• こちらも注意しておけば良かったのですが…
• こちらもよく同じミスをしちゃうのですが…

言いたくないけど言わないと自分もマズい状況なんで

• 大変申し上げにくいのですが…
• お伝えするかどうか迷ったのですが…
• 一生懸命してくださってる○○さんにこんな事をお伝えするのは申し訳ないのですが…
• 実はこちらも○○の件は△△な状況で…
• こちらも大変困惑しておりますが…

相手の意見をまず理解してから

• お考えはよく分かるのですが…
• 確かに○○のケースでは大変有効だと思います。ただ、今回の場合は…

ほんとにわかってるのかどうか怪しい

• ご存じだと思いますが…
• 以前○○の案件でも使われていた△△と同じ××で大丈夫なのですが…

もうこっちで処理した方がいいんじゃね？どう思ってるの？

• 差支えなければ、こちらでもお手伝いをさせて頂きたいと思っております。
• お時間的に厳しい様であれば、こちらでも対応致しますので、ご遠慮なくお申し付けください。
• 何かこちらでもお手伝い出来る事があれば…

とにかくお願いします

• お願いばかりで申し訳ないのですが…
• お忙しい所恐縮ですが…

上にも書いたけど、基本的には怒ってる文面は避けるべきだと思う。今後の関係性だけでなく、自分っていう人間が誤解されると損だから。それでなくても顔を見て話すコミュニケーションと違って、メール文章って冷たく感じるし。イライラしてる時こそ深呼吸して丁寧に。感情に任せてガガガーと書いちゃだめ。それやっちゃうと結局後で自分が後悔する。(実体験)

催促系

やるやる言いながら全然相手からのアクションがない事が多々。放置されてるかなと思った時には早めに気分を害さない催促メール。単純に相手が忘れているだけの場合が多いと思うのだけれども、メールを送る事で状況を再認識してもらえれば…。

個人的な経験から言うと「お手すきの際に」「急ぎませんので」を入れて相手に余裕を持たせるとと更に遅れる。本気で急いでいる時は具体的な日時を文章に入れる方が良さそう。（「○月○日○曜日までにご返信を…」みたいな。）

心配しつつ

• 先日は○○の件、ありがとうございました。
  △△につきましてはすぐにお送り頂けるとのことでしたが、未だこちらに届いておりません。
  もしかして何か問題でもありましたでしょうか？
• 前回ご連絡頂いてからしばらく時間が空いてしまいましたが、何かありましたでしょうか？

都合の悪い事は機械のせい

• もしかしたら何らかのメールトラブルで届いていない可能性もあるかなと心配になり、確認のため連絡させて頂きました。すでにお送り頂いている様でしたら…

進捗状況の確認とともに

• ○○の件、△日にご提出頂けると伺っておりましたが、進捗状況はいかがでしょうか？
• ○○の処理はお済でしょうか？状況をお知らせ頂ければ助かります。

忘れてないよね？

• 恐れ入りますが、今一度ご確認をお願い致します。
• 念のため…
• このままだと○○になってしまう可能性もございますので
• 状況をお知らせ頂けますでしょうか。
• ○○の件の確認をさせて頂きたいのですが…

文末のダメ押し

伝えなくてはいけないことは必ず伝える。最後にはもう一度ダメ押しをする。ただ、やっぱり相手を責めるような事は書いちゃだめだと思う。なんていうか、相手の気持ちが動くような文章を書きたい。

期待してるぜ(期待してなくても期待していることにして)

• ご返信をお待ちしております。
• ○○の件、楽しみにしております。
• 頼りにしております。

具体的な日付を添える

• こちらの都合で恐縮ですが、○日までにご返信頂ければと存じます。
• ○日が期日となっておりますので、今日中にご返信頂ければ幸いです。

とにかく早よ

• 急かすようで申し訳ありませんが…
• ご多忙の所、申し訳ありませんが…
• ○○様のご事情もおありだと思いますが…
• 取り急ぎ、○○の件だけでも先にご返信頂ければ助かります。

ちょっと厳しめ

ちょっと厳しめな文章を書く時も、こっちの状況もわかるように書いた方が受け入れてもらいやすい(ような気がする)。

• 事情をご理解頂き、至急ご連絡頂けますよう宜しくお願い申し上げます。
• ○○に影響してまいりますので、早急にご対応のほど宜しくお願い致します。
• ○日の期日は延ばす事が出来ませんので … 何卒宜しくお願い致します。

よく使う文末

• ご遠慮なくおっしゃってください。
• 重ねてお願い申し上げます。
• ○○して頂きますよう、宜しくお願い致します。
• ○○して頂ければ幸いです。
• ○○して頂ければ助かります。
• ○○して頂ければ有難いです。
• ご理解とご協力のほどお願い申し上げます。

サンプルページ

まずはサンプルから。
内容としてはCSSだけでモバイル環境の場合にテーブルのデザインを変えるというもの。

>>REDLINE MAGAZINE | レスポンシブ対応テーブルサンプル

ネタ元のCODEPENページ。

>>A Pen by Captain Anonymous

ソース

自分とこのサンプルからソース部分を。まずはhtmlソース。

<table>
  <thead>
    <tr>
    <th>イベント名</th>
    <th>開催日</th>
    <th>場所</th>
    <th>料金</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    <td data-label="イベント名">なんたらイベント</td>
    <td data-label="日時">2015/04/08(水) </td>
    <td data-label="場所">大阪府大阪市どこどこ</td>
    <td data-label="料金">1,000円</td>
    </tr>
    <tr>
    <td data-label="イベント名">かんたらイベント</td>
    <td data-label="日時">2015/04/09(木)</td>
    <td data-label="場所">兵庫県神戸市どこどこ</td>
    <td data-label="料金">1,000円</td>
    </tr>
  </tbody>
</table>

次に肝心のcssソース。

table{
	width:100%;
	border-collapse:collapse;
	border-spacing:0;
	border:1px solid #ccc;
	padding:0;
	margin:0;
}

table tr{
	border:1px solid #ddd;
	padding:5px;
}

table th, table td{
	padding:10px;
	text-align:center;
}

table th{
	font-size:14px;
	letter-spacing:1px;
}

@media screen and (max-width: 600px) {

	table{
		border:0;
	}

	table thead{
		display:none;
	}

	table tr{
		margin-bottom:10px;
		display:block;
		border-bottom:2px solid #ddd;
	}

	table td{
		display:block;
		text-align:right;
		font-size:13px;
		border-bottom:1px dotted #ccc;
	}

	table td:last-child{
		border-bottom:0;
	}

	table td:before {
		content:attr(data-label);
		float:left;
		font-weight: bold;
	}
}

ポイントはcontent:attr()の利用

contentプロパティは:before擬似要素や:after擬似要素にコンテンツを挿入する際に使用するプロパティ。content:attr()は関数型の値で括弧内に指定した属性名の値が入ります。

:before擬似要素や:after擬似要素を利用したCSSネタなんかも最近はよく見かけますが、ツールチップの矢印だったり、アイコンフォントを入れるためだったりのお話が多いので、個人的には「content:attr()」ってのは盲点でした(；´Д｀)

CSSでやってる事は、テーブルの各要素の装飾、@mediaでモバイル端末用のテーブルの見た目を適した形へ整える。theadの内容は必要ないので非表示に、th要素とtd要素をblock化、そして今回のサンプルでは予めtd要素にdata-labelというカスタムデータ属性を付けているのでcontent:attr()でその内容を表示させています。

cssのソースも比較的スッキリしたものなので、使いやすそうだなと思いました(*´ω｀*)

かなり立ち読みできるんだぜ！

Google Booksでかなりのページも立ち読みできるみたいなので、興味のある方は是非是非。

>>できるポケット HTML5&CSS3/2.1全事典 – 小川裕子, 加藤善規, できるシリーズ編集部 – Google ブックス

正誤表

正誤表はこちらにありました。なんか変やなって思った時には確認してみると良いかもです。

>>できるポケット HTML5&CSS3/2.1全事典 | インプレス

良い本だなと思ったので、一部キャプ貼ろうかなとも思ったのですが、上記Googleブックスで見た方がいいわと思ったので自重します。

ここが良かった(*´ω｀*)

• 目次が見やすい。探しやすい！
• 要素やプロパティの読み方がカタカナで書いてある。これで恥をかかないぜ！
• HTML5のW3C正式勧告に完全対応している。これを理解すれば間違いがない！
• CSSも3に対応。使った事ないプロパティがいっぱい！楽しい！

…などなど。買って良かったなぁと思う点は多々ありました。最近ネットで注目されていて、これから使ってみようと思ってたCSSプロパティなんかも当然ちゃんと載っていて勉強になりました。

リファレンス本を買っただけで理解できた気になるという謎の勘違いを起こさずに、ちゃんと理解して活かしていきたいものです(*´ω｀*)←

とりあえず、今現時点でなんかリファレンス本が１冊欲しいなー、どれにしよーかなーと迷ってる方にはオススメの１冊です。

>>できるポケット HTML5&CSS3/2.1全事典

• 単行本（ソフトカバー）: 416ページ
• 出版社: インプレス (2015/3/2)
• 言語: 日本語
• ISBN-10: 4844337394
• ISBN-13: 978-4844337393
• 発売日： 2015/3/2
• 商品パッケージの寸法: 18.2 x 13 x 3 cm

Sassに用意されている関数一覧

Sassのネイティブ関数一覧は下記リファレンスで確認できます。

>> Module: Sass::Script::Functions — Sass Documentation

色関連の関数

RGB関連の関数

• rgb($red, $green, $blue)
  赤、緑、青の値から色を作成する。
• rgba($red, $green, $blue, $alpha)
  赤、緑、青、およびアルファ値から、色を作成する。
• red($color)
  RGBの赤(R値)を返す。
• green($color)
  RGBの緑(G値)を返す。
• blue($color)
  RGBの青(B値)を返す。
• mix($color1, $color2, [$weight])
  2つの色を混ぜて中間色を作成する。

HSL関連の関数

• hsl($hue, $saturation, $lightness)
  色相、彩度、輝度の値から色を作成する。
• hsla($hue, $saturation, $lightness, $alpha)
  色相、彩度、輝度、およびアルファ値から、色を作成する。
• hue($color)
  HSLの色相(hue値)を返す。
• saturation($color)
  HSLの彩度(saturation値)を返す。
• lightness($color)
  HSLの輝度(lightness値)を返す。
• adjust-hue($color, $degrees)
  色相を変更する。
• lighten($color, $amount)
  明度を上げる。(明るくする)
• darken($color, $amount)
  明度を下げる。(暗くする)
• saturate($color, $amount)
  彩度を上げる。
• desaturate($color, $amount)
  彩度を下げる。
• grayscale($color)
  グレースケールに変換する。
• complement($color)
  補色を返す。
• invert($color)
  色を反転させて返す。

透明度関連の関数

• alpha($color) / opacity($color)
  透明度を取得する。
• rgba($color, $alpha)
  透明度を変更する。
• opacify($color, $amount) / fade-in($color, $amount)
  より不透明にする。
• transparentize($color, $amount) / fade-out($color, $amount)
  より透明にする。

その他の色に関連する関数

• adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
  あらゆる色の値を一気に調整する。
• scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])
  流動的に色を変更する。(Fluidly scales one or more properties of a color.←訳せない私)
• change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
  指定した色の値を変更。
• ie-hex-str($color)
  IEフィルタ(filterプロパティ)に実装されているフォーマットに変換する。

文字列関連の関数

• unquote($string)
  文字列からクォーテーションを取り除く。
  unquote("foo") => foo
  unquote(foo) => foo
• quote($string)
  文字列にクォーテーションを加える。
  quote("foo") => "foo"
  quote(foo) => "foo"
• str-length($string)
  文字列の長さを返す。
  str-length("foo") => 3
• str-insert($string, $insert, $index)
  $stringの$indexの位置へ$insertを挿入する。
  str-insert("abcd", "X", 1) => "Xabcd"
  str-insert("abcd", "X", 4) => "abcXd"
• str-index($string, $substring)
  $stringの中で$substringが何番目(何文字目)かを返す。
  str-index(abcd, a) => 1
  str-index(abcd, ab) => 1
  str-index(abcd, X) => null
  str-index(abcd, c) => 3
• str-slice($string, $start-at, [$end-at])
  $stringの中で指定した箇所から(指定した箇所まで)の抜粋したものを返す。
  str-slice("abcd", 2, 3) => "bc"
  str-slice("abcd", 2) => "bcd"
  str-slice("abcd", -3, -2) => "bc"
  str-slice("abcd", 2, -2) => "bc"
• to-upper-case($string)
  $stringを大文字に変換する。
  to-upper-case(abcd) => ABCD
• to-lower-case($string)
  $stringを小文字に変換する。
  to-lower-case(ABCD) => abcd

数値関連の関数

• percentage($number)
  $numberをパーセンテージに変換する。
  percentage(0.2) => 20%
  percentage(100px / 50px) => 200%
• round($number)
  $numberの端数を四捨五入してもっとも近い整数にする。
  round(10.4px) => 10px
  round(10.6px) => 11px
• ceil($number)
  $numberの端数を切り上げて次のもっとも近い整数にする。
  ceil(10.4px) => 11px
  ceil(10.6px) => 11px
• floor($number)
  $numberの端数を切り捨ててもっとも近い整数にする。
  floor(10.4px) => 10px
  floor(10.6px) => 10px
• abs($number)
  $numberの絶対値を返す。
  abs(10px) => 10px
  abs(-10px) => 10px
• min($numbers…)
  $numbers…の中で最小値を返す。
  min(1px, 4px) => 1px
  min(5em, 3em, 4em) => 3em
• max($numbers…)
  $numbers…の中で最大値を返す。
  max(1px, 4px) => 4px
  max(5em, 3em, 4em) => 5em
• random([$limit])
  乱数を返す。

リスト関連の関数

• length($list)
  $listの長さ(項目数)を返す。
  length(10px) => 1
  length(10px 20px 30px) => 3
  length((width: 10px, height: 20px)) => 2
• nth($list, $n)
  $listの中で$n番目の値を返す。
  nth(10px 20px 30px, 1) => 10px
  nth((Helvetica, Arial, sans-serif), 3) => sans-serif
  nth((width: 10px, length: 20px), 2) => length, 20px
• set-nth($list, $n, $value)
  $list,の$n番目の値(項目)を$valueに置き換える。
  set-nth(10px 20px 30px, 2, -20px) => 10px -20px 30px
• join($list1, $list2, [$separator])
  $list1と$list2を結合する。
  join(10px 20px, 30px 40px) => 10px 20px 30px 40px
  join((blue, red), (#abc, #def)) => blue, red, #abc, #def
  join(10px, 20px) => 10px 20px
  join(10px, 20px, comma) => 10px, 20px
  join((blue, red), (#abc, #def), space) => blue red #abc #def
• append($list1, $val, [$separator])
  $list1の最後に$valを追加する。
  append(10px 20px, 30px) => 10px 20px 30px
  append((blue, red), green) => blue, red, green
  append(10px 20px, 30px 40px) => 10px 20px (30px 40px)
  append(10px, 20px, comma) => 10px, 20px
  append((blue, red), green, space) => blue red green
• zip($lists…)
  $lists(複数のリスト)を1つの多次元リストに統合する。
  zip(1px 1px 3px, solid dashed solid, red green blue) => 1px solid red, 1px dashed green, 3px solid blue
• index($list, $value)
  $listの中の$valueの位置を返す。
  index(1px solid red, solid) => 2
  index(1px solid red, dashed) => null
  index((width: 10px, height: 20px), (height 20px)) => 2
• list-separator(#list)
  リスト内のセパレーターを返す。
  list-separator(1px 2px 3px) => space
  list-separator(1px, 2px, 3px) => comma
  list-separator(‘foo’) => space

マップ関連の関数

• map-get($map, $key)
  $mapの中の$keyの値を返す。
  map-get(("foo": 1, "bar": 2), "foo") => 1
  map-get(("foo": 1, "bar": 2), "bar") => 2
  map-get(("foo": 1, "bar": 2), "baz") => null
• map-merge($map1, $map2)
  $map1と$map2を結合する。
  map-merge(("foo": 1), ("bar": 2)) => ("foo": 1, "bar": 2)
  map-merge(("foo": 1, "bar": 2), ("bar": 3)) => ("foo": 1, "bar": 3)
• map-remove($map, $keys…)
  $mapの中の$keys(キーとそれに対する値)を削除して返す。
  map-remove(("foo": 1, "bar": 2), "bar") => ("foo": 1)
  map-remove(("foo": 1, "bar": 2, "baz": 3), "bar", "baz") => ("foo": 1)
  map-remove(("foo": 1, "bar": 2), "baz") => ("foo": 1, "bar": 2)
• map-keys($map)
  $mapの中のキーのリスト返す。
  map-keys(("foo": 1, "bar": 2)) => "foo", "bar"
• map-values($map)
  $mapの中の(キーに対する)値のリスト返す。
  map-values(("foo": 1, "bar": 2)) => 1, 2
  map-values(("foo": 1, "bar": 2, "baz": 1)) => 1, 2, 1
• map-has-key($map, $key)
  $mapの中に$keyが含まれるかのどうかの真偽を返す。
  map-has-key(("foo": 1, "bar": 2), "foo") => true
  map-has-key(("foo": 1, "bar": 2), "baz") => false
• keywords($args)
  $args(可変長引数)から引数の名前をファンクションやミックスインへリストとして返すやつ?(←よく分かってないから違うかも。まぁでもなんか基本名的にマップ用の何か。)

セレクタ関連の関数

• selector-nest($selectors…)
  $selectors…の値をネストされたセレクタとして返す。($selectorsをネストさせる)
  selector-nest(".foo", ".bar", ".baz") => .foo .bar .baz
  selector-nest(".a .foo", ".b .bar") => .a .foo .b .bar
  selector-nest(".foo", "&.bar") => .foo.bar　←「&」を使えば連結セレクタ
• selector-append($selectors…)
  $selectors…の値ををスペースなしで追加する。 ($selecorsのリスト順に追加)
  selector-append(".foo", ".bar", ".baz") => .foo.bar.baz
  selector-append(".a .foo", ".b .bar") => "a .foo.b .bar"
  selector-append(".foo", "-suffix") => ".foo-suffix"
• selector-extend($selector, $extendee, $extender)
  $selectorの中を$extenderによって$extendeeを拡張する。(←よくわからない;;)
  selector-extend(".a .b", ".b", ".foo .bar") => .a .b, .a .foo .bar, .foo .a .bar
• selector-replace($selector, $original, $replacement)
  $selectorの$originalを$replacementに置換する。
  selector-replace(".foo .bar", ".bar", ".baz") => ".foo .baz"
  selector-replace(".foo.bar.baz", ".foo.baz", ".qux") => ".bar.qux"
• selector-unify($selector1, $selector2)
  $selector1と$selector2を組み合わせたセレクタを返す。(組み合わせを全て返す)
  selector-unify(".a", ".b") => .a.b
  selector-unify(".a .b", ".x .y") => .a .x .b.y, .x .a .b.y
  selector-unify(".a.b", ".b.c") => .a.b.c
  selector-unify("#a", "#b") => null
• is-superselector($super, $sub)
  $superが$subの親要素かどうかの真偽を返す。
  is-superselector(".foo", ".foo.bar") => true
  is-superselector(".foo.bar", ".foo") => false
  is-superselector(".bar", ".foo .bar") => true
  is-superselector(".foo .bar", ".bar") => false
• simple-selectors($selector)
  $selector(連結セレクタ)を分解してシンプルなセレクタを返す。
  simple-selectors(".foo.bar") => ".foo", ".bar"
  simple-selectors(".foo.bar.baz") => ".foo", ".bar", ".baz"
• selector-parse($selector)
  $selectorをパースしてセレクタを返す。
  selector-parse(".foo .bar, .baz .bang") => (‘.foo’ ‘.bar’, ‘.baz’ ‘.bang’)

内部の値に関する関数

• feature-exists($feature)
  現在のSassのランタイム内に$featureが存在するかどうかの真偽を返す。
  feature-exists(some-feature-that-exists) => true
  feature-exists(what-is-this-i-dont-know) => false
• variable-exists($name)
  現在のスコープ内、およびグローバルスコープ内に$nameという変数が存在するかどうかの真偽を返す。
  $a-false-value: false;
  variable-exists(a-false-value) => true
  variable-exists(nonexistent) => false
• global-variable-exists($name)
  $nameというグローバル変数が存在するかどうかの真偽を返す。
  $a-false-value: false;
  global-variable-exists(a-false-value) => true
  .foo {
  　　$some-var: false;
  　　@if global-variable-exists(some-var) { /* false, doesn’t run */ }
  }
• function-exists($name)
  $nameという関数が存在するかどうかの真偽を返す。
  function-exists(lighten) => true
  @function myfunc { @return "something"; }
  function-exists(myfunc) => true
• mixin-exists($name)
  $nameというミックスインが存在するかどうかの真偽を返す。
  mixin-exists(nonexistent) => false
  @mixin red-text { color: red; }
  mixin-exists(red-text) => true
• inspect($value)
  $valueの値を文字列で返す。デバッグ用。
• type-of($value)
  $valueのデータ型を返す。
  type-of(100px) => number
  type-of(asdf) => string
  type-of("asdf") => string
  type-of(true) => bool
  type-of(#fff) => color
  type-of(blue) => color
• unit($number)
  $number関連の単位を返す。
  unit(100) => ""
  unit(100px) => "px"
  unit(3em) => "em"
  unit(10px * 5em) => "em*px"
  unit(10px * 5em / 30cm / 1rem) => "em*px/cm*rem"
• unitless($number)
  $numberに単位があるかどうかの真偽を返す。(ないのがtrue、あるのがfalse)
  unitless(100) => true
  unitless(100px) => false
• comparable($number1, $number2)
  $number1と$number2が足したり引いたり、比較できるかどうかの真偽を返す。
  comparable(2px, 1px) => true
  comparable(100px, 3em) => false
  comparable(10cm, 3mm) => true
• call($name, $args…)
  動的に関数を呼ぶ関数。(既存のSassの関数と自作関数)
  call(rgb, 10, 100, 255) => #0a64ff
  call(scale-color, #0a64ff, $lightness: -10%) => #0058ef
  $fn: nth;
  call($fn, (a b c), 2) => b

その他の関数

• if($condition, $if-true, $if-false)
  $conditionがtrueなら$if-trueの値を、$conditionがfalseなら$if-falseの値を返す。
  if(true, 1px, 2px) => 1px
  if(false, 1px, 2px) => 2px
• unique-id()
  ユニークな文字列を返す。(値はランダム。９桁の文字列。コンパイル毎に内容は変わる。)
  content: unique-id() => content: umtqgncou

@function で自作関数を定義する

Sassには上記のようにたくさんの関数が予め用意されていますが、自分で関数を用意することも出来ます。自作関数の書き方はこんな感じです。

@function 自作関数名($引数){
	@return 戻り値;
}

自分で関数を定義する際は「@function」で関数の宣言をして、戻り値には「@return」を使用します。

ミックスインと書き方が似ていますが、ミックスインはルールセット毎に使用するのに対して、関数は主に値で使用する、それが用途の違い、とのこと。数値の計算や変換などの処理は関数で処理する。注意点は元からあるネイティブ関数名とバッティングしないように気を付けること。

簡単な使用例

ベースとなるとフォントサイズを変数($baseFontSize)に代入しておいて、関数を通して$baseFontSizeと引数で指定した数値を足したものをプロパティの値にしています。

$baseFontSize: 12;

@function setFontSize($value){
	@return $baseFontSize + $value + px;
}

.testFont{
	font-size: setFontSize(3);
}

/* コンパイル後 */
.testFont {
  font-size: 15px;
}

ネイティブ関数との組み合わせ、変数の利用

Sassのネイティブ関数と組み合わせる事も出来ますし、変数を利用する事も可能です。変数を使用する場合、@functionの中で定義した変数はその@function内でしか使えない点に注意。

下記の例では、あるブロックを分割する際に1カラム分の幅がいくらになるかを関数を通して計算しています。

$totalWidth: 1000px;

@function columnWidth($value) {
	$columnWidth: floor($totalWidth / $value);
	@return $columnWidth;
}

.testColumn1{
	width:columnWidth(7);
}
.testColumn2{
	width:columnWidth(5);
}

/* コンパイル後 */
.testColumn1 {
  width: 142px;
}

.testColumn2 {
  width: 200px;
}

合計の幅を予め変数に代入しておいて、関数の引数($value)でカラム数を指定、「合計の幅/カラム数」で１カラム毎の幅を$columnWidthに代入して返します。また、$columnWidthがいつも割り切れる数になるとは限らないので、ネイティブ関数のfloor()を用いて四捨五入しています。

引数の初期値を指定

引数の初期値を指定しておくことも可能です。引数の初期値はミックスインと同様に「($引数: 初期値)」で指定します。

$totalWidth: 1000px;
$defaultColumn: 4;

@function columnWidth($value: $defaultColumn) {
	$columnWidth: floor($totalWidth / $value);
	@return $columnWidth;
}

.testColumn3{
	width:columnWidth();
}
.testColumn4{
	width:columnWidth(6);
}

/* コンパイル後 */
.testColumn3 {
  width: 250px;
}

.testColumn4 {
  width: 166px;
}

@debugと@warn

最後に「@debug」と「@warn」のお話。どちらもテストやデバッグに使用するもので、出力されるCSSには何も直接影響はしません。コマンド画面に何かメッセージを出してくれるもので、主にミックスインや今回の関数のテストやデバッグに使用します。

@debugの使い方

「@debug」の書き方は下記のとおりです。

@debug 結果を確認したい変数など

シンプルな例ですが、まずは簡単な方が良いのでscssファイルに次のような記述をしてみます。

// scssファイル
@debug 10px + 15px;

すると下記のようなメッセージがコマンド画面(黒いやつ)に出てきます。

scss/test.scss:786 DEBUG: 25px

「ファイル名:行数　DEBUG: 結果」という形でデバッグ結果が表示されます。

上記サンプルではいきなり「@debug」の行を書いていますが、ミックスインや関数の中で値をとりあえず確認したい際なんかに使うのが普通だと思います。自作関数の箇所で書いたサンプルで使ってみると、こんな感じです。

$totalWidth: 1000px;
$defaultColumn: 4;

@function columnWidth($value: $defaultColumn) {
	$columnWidth: floor($totalWidth / $value);
	@debug $columnWidth;
	@return $columnWidth;
}

.debugTest{
	width:columnWidth();
}

コマンド画面の方を確認してみると、

scss/test.scss:776 DEBUG: 250px

と表示されます。CSS側でも確認してみると、下記のようにちゃんと同じ数字になっています。

.debugTest {
  width: 250px;
}

同じミックスインや関数の中で複数の「@debug」を使用することが出来ますので、上の例では1つの計算しかしていませんが、色んな処理をしていく過程毎に「@debug」を突っ込めば、処理の途中過程の変数の値の変化も確認出来ます。なんか意図したとおりのCSSが出力されない時などに「@debug」を利用して途中過程の変数の中身を確認してみるとよいのではないかと思います。

@warnの使い方

「@warn」を使用すると、エラーが発生した際に任意のエラーメッセージをコマンド画面に表示させる事が出来ます。自作関数から任意のエラーメッセージを出力させたい時なんかに使う、とのこと。書き方はこんな感じ。

@warn “ここにメッセージ”;

自分の頭では警告を出したいケースが思いつかないのでSassの教科書 – 公式サポートサイトのサンプルソースを引用させて頂きます。（詳しい解説はSassの教科書を読むなりなんなりしてください。とりあえず「何か@warnを使えるサンプル」という意味でここに引用します）

$value: 1000px;
@function warnTest(){
	@if unitless($value) {
		$value: $value + px;
	}
	@else {
	@warn "#{$value}は駄目！$valueに単位は入れないで！";
	}
	@return $value;
}
.box {
	width: warnTest();
}

コマンド画面にはこんなエラーメッセージがちゃんと表示されました。

WARNING: 1000pxは駄目！$valueに単位は入れないで！
on line 796 of scss/test.scss

ということで、予め「@warn」を設定しておくと、エラーの際に具体的にどうすればいいのか分かりやすく伝える事が出来るようになります。

※GUIコンパイラ(Koalaなど)をを使用した場合、「@debug」や「@warn」などのコマンド画面に表示するディレクティブが結果を表示しないこともあるそうです。

おわりに

さてさて。Sassの勉強シリーズもこれで一旦終了です(*´ω｀*)♪
使いこなせます！とは言い切れないけれども、だいぶ理解は出来たかなと思います。

あとは実務でどう使っていくかですなぁ。一緒に仕事する人がSass使える人だと話早いんですが、私周りでは誰も使っていないという不遇な環境。私が開幕SassでCSS出力しても、その後他の人が出力後のCSSファイルをガシガシ汚していく→Sassの意味あった？ってなるのを想像すると…悲しいな、それｗ

Sassの勉強　関連記事

• Sassの勉強 #00　もっかい最初からやり直そうSassの巻
• Sassの勉強 #01　Sassとは何か？～環境構築
• Sassの勉強 #02　Sassの基本的な機能「ネスト」
• Sassの勉強 #03　Sassの基本的な機能「変数」
• Sassの勉強 #04　Sassの基本的な機能「演算」
• Sassの勉強 #05　Sassの基本的な機能「@import」
• Sassの勉強 #06　スタイルの継承ができる「@extend」
• Sassの勉強 #07　柔軟なスタイル定義が出来る「@mixin」
• Sassの勉強 #08　制御構文(条件分岐・繰り返し)
• Sassの勉強 #09　@at-root
• Sassの勉強 #10　Sassの勉強 #10　関数一覧(Ver.3.4) と自作関数

@at-root

とりあえず「@at-root」の使い方書きます。

.parent {
	text-align:left;
  @at-root .child {
		text-align:center;
	}
}

/* コンパイル後 */
.parent {
  text-align: left;
}
.child {
  text-align: center;
}

こんな感じでルールセットの中に「@at-root」をつっこめる。

上のサンプルは何の役にも立たないけれども、記述した場所より上のセレクタのネストを解除する、ということで、.parentのネストを解除して階層が1つ上がってるのが確認できる。上の例ではネストは2階層だけれども、３階層でも４階層でも「@at-root」が使われている箇所はネストが解除される。

@at-root (without: …) と @at-root (with: …)

@mediaなどのルールの中での「@at-root」はその中でのルートに展開される。

@media print{
	.parent {
		text-align:left;
		@at-root .child {
			text-align:center;
		}
	}
}

/* コンパイル後 */
@media print {
  .parent {
    text-align: left;
  }
  .child {
    text-align: center;
  }
}

これが不便だなという時用に「(without: …)」「(with: …)」というオプションを指定する事が可能。「(without: …)」を使用すれば外側で展開される。「(with: …)」を使用すれば中で展開される。

// withoutを使用した例
@media print{
  .test{
    width:100%;
    @at-root(without: media) {
      color: red;
    }
  }
}

/* コンパイル後 */
@media print {
  .test {
    width: 100%;
  }
}
.test {
  color: red;
}

// withを使用した例
@media print{
  .test{
    width:100%;
    @at-root(with: media) {
      color:red;
    }
  }
}

/* コンパイル後 */
@media print {
  .test {
    width: 100%;
  }
  color: red;
}

こうすることでメディアクエリの中で展開するものと外で展開させたいものを分ける事が可能に。うん、これは便利そう。

だが、まだだ。まだこの「@at-root」の使いどころがイマイチわからない。

@at-rootの使い道を求めて

「@at-root」の使いどころを求めて彷徨ったところ、下記のようなサンプルを発見。

@keyframesを一緒に書いておきたい時に。

@keyframesの使い方とかは省きますが、これはソースの管理が便利そう。

>>Using Sass 3.3s @at-root for piece of mind | Always Twisted. Front-End Development.

.avatar {
  background-color: red;
  height: 120px;
  margin: 40px;
  width: 120px;

  @at-root {
    @keyframes fade {
      0% { transform: scale(1.0); }
      25% { transform: scale(1.1); }
      50% { transform: scale(1.0); }
      75% { transform: scale(1.2); }
      100% { transform: scale(1.1); }
    }
  }
  &:hover {
    animation: fade .8s infinite ease-in alternate;
  }
}

/* コンパイル後 */
.avatar {
  background-color: red;
  height: 120px;
  margin: 40px;
  width: 120px;
}
@keyframes fade {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1.1);
  }
}
.avatar:hover {
  animation: fade .8s infinite ease-in alternate;
}

BEMの命名ルールに沿った形を簡単に書く

「@at-root」を使ってBEMのルールに沿ってセレクタ名を書く事が容易に。確かに「@at-root」を使えば適した記述が簡単だとソースを見て納得。(ソースについての補足を後述してますのでご一読くださいませ)

>>Almost Profound — Sass 3.3 @at-root & BEM!

.speech-bubble{
  color: purple;
   @at-root #{&}__header{
    color: orange;
  }
   @at-root #{&}__text{
    color: black;
     @at-root #{&}--link{
      color: green;
    }
  }
}

/* コンパイル後 */
.speech-bubble {
  color: purple;
}
.speech-bubble__header {
  color: orange;
}
.speech-bubble__text {
  color: black;
}
.speech-bubble__text--link {
  color: green;
}

更にミックスインでやろうぜという話も。

//elements get appended with "__" and the $name
@mixin e($name) {
  @at-root   #{&}__#{$name} {
    @content;
  }
}

//modifiers get appended with "--" and the $name
@mixin m($name) {
  @at-root   #{&}--#{$name} {
    @content;
  }
}

.speech-bubble{
  color: purple;
   @include e(header){ //header element
    color: orange;
  }
   @include e(text){ //text element
    color: black;
     @include m(link){ //link modifier
      color: green;
    }
  }
}

/* コンパイル後 */
.speech-bubble {
  color: purple;
}
.speech-bubble__header {
  color: orange;
}
.speech-bubble__text {
  color: black;
}
.speech-bubble__text--link {
  color: green;
}

BEM派な人にすごく良さげ。更にググって見ると結構BEMと「@at-root」の話を書いてる記事もあったから、その界隈では結構有名なネタなのだろう。(←今までノーマーク)

#{&} についての補足

上のサンプルソースのポイントは「@at-root」と「#{&}」ですね。それは把握。…なのですが、この「#{&}」部分については、sass ver3.3以降は「&」だけでOKです。(厳密には3.3.0.rc.6以降なのかな)

//elements get appended with "__" and the $name
@mixin e($name) {
  @at-root   &__#{$name} {
    @content;
  }
}

//modifiers get appended with "--" and the $name
@mixin m($name) {
  @at-root   &--#{$name} {
    @content;
  }
}

こう書いても同じCSSが出力されます。どちらの書き方で書いてもエラーは出ないのだけれども、下記のような問題があって「&」だけで済むようになったとのこと。

>>gist:8050187

試してみると確かに…#{&}の書き方で書いちゃうとセレクタがまずいことになる。

.foo, .bar {
  @at-root #{&}-suffix {
    color: blue;
  }
}

/* コンパイル後 */
.foo, .bar-suffix {
  color: blue;
}

「&」のみの書き方なら大丈夫。

.foo, .bar {
  @at-root &-suffix {
    color: blue;
  }
}

/* コンパイル後 */
.foo-suffix, .bar-suffix {
  color: blue;
}

ということで、「#{&}」は使用せずに「&」で書いた方が良いですねという補足。

ネストされたセレクタで、ルートと直近のセレクタの間に別のセレクタを挿入

まだSassの関数の話を書いてないのでアレなんですが、「selector_replace()」というSassの関数がありまして、

selector_replace($selector, $original, $replacement)

$selectorの$originalを$replacementに置換するっていう関数です。
こんな感じ↓

selector-replace(".foo .bar", ".bar", ".baz") => ".foo .baz"
selector-replace(".foo.bar.baz", ".foo.baz", ".qux") => ".bar.qux"

このselector_replace()関数と「@at-root」を利用してこんな事が出来ちゃうというぜっていうお話を下記サイトで見つけました。

>>selector-replace() の利用 · terkel.jp

.outer {
	color: red;

	.inner {
		color: green;

		@at-root {
				#{ selector-replace(&, '.outer', '.outer .foo') } {
						color: blue;
				}
		}
	}
}

/* コンパイル後 */
.outer {
  color: red;
}
.outer .inner {
  color: green;
}
.outer .foo .inner {
  color: blue;
}

.outer下からいちいちセレクタを書きなおさなくても別のセレクタを割り込ませる事がこれで簡単に可能に。

また同サイトの使い方では汎用的なセレクタを定義したルールの中で絞り込みをするという話も書かれていました。

.bar {
	.button {
		border: 1px solid;

		@at-root {
				#{ selector-replace(&, ".button", "a.button") } {
						text-decoration: none;
				}
		}
	}
}

/* コンパイル後 */
.bar .button {
  border: 1px solid;
}
.bar a.button {
  text-decoration: none;
}

.buttonというクラスを定義して、その中で要素がa要素だったら…っていう絞り込み。とにかく発想がすごいと思いました(*´ω｀*)

Sassの勉強　関連記事

• Sassの勉強 #00　もっかい最初からやり直そうSassの巻
• Sassの勉強 #01　Sassとは何か？～環境構築
• Sassの勉強 #02　Sassの基本的な機能「ネスト」
• Sassの勉強 #03　Sassの基本的な機能「変数」
• Sassの勉強 #04　Sassの基本的な機能「演算」
• Sassの勉強 #05　Sassの基本的な機能「@import」
• Sassの勉強 #06　スタイルの継承ができる「@extend」
• Sassの勉強 #07　柔軟なスタイル定義が出来る「@mixin」
• Sassの勉強 #08　制御構文(条件分岐・繰り返し)
• Sassの勉強 #09　@at-root
• Sassの勉強 #10　Sassの勉強 #10　関数一覧(Ver.3.4) と自作関数

Sassで使える制御構文

使えるのは以下の4つです。これらを使用してよりプログラミングっぽい書き方ができるようになります。jsやPHP等に触れる機会も多いと思いますが、だいたい同じような書き方で使えます。

• @if（条件分岐）
• @for（繰り返し）
• @while（繰り返し）
• @each（繰り返し）

@if(条件分岐)

「もし～なら」という条件分岐の際に使用する「@if」。Sassの場合は頭に「@」がつきます。

@if(条件分岐)の書き方

@if 条件{
	・・・
}

「@else」や「@else if」を使ってさらに条件を増やすことができます。

@if 条件1{
		・・・
	}@else if 条件2{
		・・・
	}@else{
		・・・
}

簡単なサンプル。$ifTestの値に対してスタイルを振り分ける例。$ifTestの値が1ならcolorはred、値が2ならblue、それ以外ならgreenとなる。

$ifTest: 1;

#sample{
	@if $ifTest == 1{
		color:red;
	}@else if $ifTest == 2{
		color:blue;
	}@else{
		color:green;
	}
}

/* コンパイル後 */
#sample {
  color: red;
}

勿論ミックスインの中などでも使えるので、より柔軟にスタイルの指定が可能となる。@if文で使える比較演算子と論理演算子は以下の通り。

@if文で使える比較演算子と論理演算子

• 「==」等しい　[$a == $b … $a が $b に等しい時に TRUE。]
• 「!=」 等しくない　[$a != $b … $a が $b に等しくない場合に TRUE。]
• 「<」より少ない(小なり)　[$a < $b … $a が $b より少ない時に TRUE。]
• 「>」より多い(大なり)　[$a > $b … $a が $b より多い時に TRUE。]
• 「<=」より少ないか等しい(以下) 　[$a <= $b … $a が $b より少ないか等しい時に TRUE。]
• 「>=」より多いか等しい(以上)　[$a >= $b … $a が $b より多いか等しい時に TRUE。]
• 「and」かつ　[$a and $b … $a および $b が共に TRUE の場合に TRUE。]
• 「or」または　[$a or $b … $a または $b のどちらかが TRUE の場合に TRUE。]
• 「not」否定　[not $a … $a が TRUE でない場合 TRUE。]

@for(繰り返し)

条件下で1つずつカウントアップしながら繰り返し処理する「@for」。構文の書き方は２通りある。

@for(繰り返し)の書き方

//書き方 その1
@for $変数名 from 開始値 through 終了値{
    ・・・
}

//書き方 その2
@for $変数名 from 開始値 to 終了値{
    ・・・
}

ソースの違いは開始値と終了値の間に「through」を使うか「to」を使うか。「through」と「to」では、処理を終了する数値(回数)が変わる。「through」を使用した場合、指定した数値を含んで繰り返し、「to」を使用した場合、指定した数値を含まずに繰り返し。それがこの2つの書き方の違い。

「through」を使用したサンプル。「through 3」としているので指定した数値を含む回数＝3回分の処理が行われる。

// throughを使用した書き方
@for $i from 1 through 3{
	.test-#{$i}{
		margin-bottom:1px * $i;
	}
}

/* コンパイル後 */
.test-1 {
  margin-bottom: 1px;
}

.test-2 {
  margin-bottom: 2px;
}

.test-3 {
  margin-bottom: 3px;
}

次に「to」を使用したサンプル。「to 3」としているので指定した数値を含まず、2回分の処理が行われる。

// toを使用した書き方
@for $i from 1 to 3{
	.test-#{$i}{
		margin-bottom:1px * $i;
	}
}

/* コンパイル後 */
.test-1 {
  margin-bottom: 1px;
}

.test-2 {
  margin-bottom: 2px;
}

@while(繰り返し)

条件にあてはまる間ずっと繰り返し処理を行う「@while」。
「@while」は「@for」よりももう少し複雑な繰り返し処理が可能。「@for」が1ずつ増えていくのに対して、こちらは増やし方、減らし方も自分で指定出来ます。

@while(繰り返し)の書き方

@while 条件{
    ・・・
}

下記は変数「$i」に8を代入しておいて、処理を繰り返すごとに「$i -2」する、それが0になるまで繰り返す、というサンプル。

$i: 8;
@while $i > 0{
  .test-#{$i}{ width: 2em * $i; }
  $i: $i - 2;
}

/* コンパイル後 */
.test-8 {
  width: 16em;
}

.test-6 {
  width: 12em;
}

.test-4 {
  width: 8em;
}

.test-2 {
  width: 4em;
}

下記は@forでも@whileでもいいのだけれども、例えば背景画像を使ったナビゲーションなんかで要素ごとに背景画像をズラしてhover時の表示を変えたい時にこんな書き方すると分かりやすいし楽だなっていうサンプル。

$menu: 1;
@while $menu < 7{
	li#menu0#{$menu} a:hover{background-position:-150px * $menu -60px}
	$menu: $menu + 1;
}

/* コンパイル後 */
li#menu01 a:hover {
  background-position: -150px -60px;
}

li#menu02 a:hover {
  background-position: -300px -60px;
}

li#menu03 a:hover {
  background-position: -450px -60px;
}

li#menu04 a:hover {
  background-position: -600px -60px;
}

li#menu05 a:hover {
  background-position: -750px -60px;
}

li#menu06 a:hover {
  background-position: -900px -60px;
}

@each(繰り返し)

指定したリストが存在する間ずっと繰り返し処理を行う「@each」。

@each(繰り返し)の書き方

@each $変数名 in リスト{
    ・・・
}

リストは変数に「,(カンマ)」区切りで代入しておく。(スペース区切りでも良い)

下記はすごくすごくシンプルな例ですが、変数に入れたリスト分繰り返し処理が行われているのが確認できる。

$classList: classA, classB, classC, classD;

@each $test in $classList{
	.test-#{$test}{
		width:100%;
	}
}

/* コンパイル後 */
.test-classA {
  width: 100%;
}

.test-classB {
  width: 100%;
}

.test-classC {
  width: 100%;
}

.test-classD {
  width: 100%;
}

body要素にページ毎にidを振り分けてある状況で、「@each」を使って各h1.categoryTitleの背景画像を指定するサンプル。

$pageID: index, product, company, inquiry;

@each $page in $pageID{
	body##{$page} h1.categoryTitle{
		background:url(img/title_#{$page}.png);
	}
}

/* コンパイル後 */
body#index h1.categoryTitle {
  background: url(img/title_index.png);
}

body#product h1.categoryTitle {
  background: url(img/title_product.png);
}

body#company h1.categoryTitle {
  background: url(img/title_company.png);
}

body#inquiry h1.categoryTitle {
  background: url(img/title_inquiry.png);
}

ページが増えた場合にも、リストの中身を増やすだけで簡単にCSS側に出力される。

Sassの勉強　関連記事

• Sassの勉強 #00　もっかい最初からやり直そうSassの巻
• Sassの勉強 #01　Sassとは何か？～環境構築
• Sassの勉強 #02　Sassの基本的な機能「ネスト」
• Sassの勉強 #03　Sassの基本的な機能「変数」
• Sassの勉強 #04　Sassの基本的な機能「演算」
• Sassの勉強 #05　Sassの基本的な機能「@import」
• Sassの勉強 #06　スタイルの継承ができる「@extend」
• Sassの勉強 #07　柔軟なスタイル定義が出来る「@mixin」
• Sassの勉強 #08　制御構文(条件分岐・繰り返し)
• Sassの勉強 #09　@at-root
• Sassの勉強 #10　Sassの勉強 #10　関数一覧(Ver.3.4) と自作関数

@mixin 基本

「@mixin」はスタイルを定義しておき、それを好きなところで呼び出せるという機能。それだけだと「@extend」と変わらないって感じなのですが、「@mixin」では引数が使えちゃう(*´∀｀)！
…と興奮気味ですが、さっそく基本の使い方をみていきます。

ミックスインの使い方

まず「@mixin 任意の名前{・・・}」という形でミックスインを定義します。

// ミックスインを定義
@mixin mixinTest{
	width:100%;
	color:#000;
	padding:10px;
	margin:0 auto;
}

定義しただけではCSS側には何も出力されませんので、その定義したミックスインを「@include 任意の名前;」で呼び出します。

// インクルードで呼び出す
#sample{
	@include mixinTest;
}

そうすると、CSS側への出力はこうなります。

#sample {
  width: 100%;
  color: #000;
  padding: 10px;
  margin: 0 auto;
}

定義した「mixinTest」の内容が、「#sample」の中に展開されているのが確認できます。

ミックスインは「@mixin」と「@include」をセットで使う　←覚える。

ここまでは「@extend」でも可能なのですが、ミックスインを使った場合、使用するルールセットが増えた場合でもセレクタのグループ化はされません。

先ほどとまったく同じ例ですが、今度は定義したミックスインを別のセレクタのルールセットにも呼び出してみます。

// ミックスインを定義
@mixin mixinTest{
	width:100%;
	color:#000;
	padding:10px;
	margin:0 auto;
}

#sample01{
	@include mixinTest;
}
#sample02{
	@include mixinTest;
}

「@extend」の場合なら「#sample01」「#sample02」のセレクタはグループ化されますが、ミックスインの場合はグループ化されずに出力されます。

/* コンパイル後 */
#sample01 {
  width: 100%;
  color: #000;
  padding: 10px;
  margin: 0 auto;
}

#sample02 {
  width: 100%;
  color: #000;
  padding: 10px;
  margin: 0 auto;
}

そのほかにも「@extend」との違いがあります。ミックスインのすごいとこは下記のような機能が使える事です。

引数を使う

引数って何よという説明は省きますが、さっそく簡単な例を。

引数を使用する場合はミックスイン名の後に「()丸括弧」をつけて、その中に引数を書きます。引数を複数指定する場合は「,(カンマ)」区切りで指定します。

@mixin ミックスイン名(引数){・・・}　引数の数は必要なだけ,区切りで指定。

// ミックスインを定義
@mixin test-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

// ミックスインを呼び出し
#test{
	@include test-border(blue, 1px);
	}

「test-border」というミックスインにスタイル定義しました。それを#testで呼び出しています。@mixin test-border($color, $width) の部分、引数に「$color」「$width」をセットしています。この引数(変数)の値を@include時に指定してやると(上の例では「(blue, 1px)」)コンパイル後のCSSは下記のようになります。

#test {
  border-color: blue;
  border-width: 1px;
  border-style: dashed;
}

違うセレクタで呼び出す際、引数の値を変えればその部分だけ指定した値が反映されて出力されます。

// ミックスインを定義
@mixin test-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
// ミックスインを呼び出し
#test{
	@include test-border(blue, 1px); // blue, 1px
	}
#test2{
	@include test-border(blue, 3px); // blue, 3px
	}
  
/* コンパイル後 */
#test {
  border-color: blue;
  border-width: 1px;
  border-style: dashed;
}

#test2 {
  border-color: blue;
  border-width: 3px;
  border-style: dashed;
}  

引数のデフォルト値を定義する

この引数に予めデフォルト値を定義しておくことも可能です。書き方は引数の後に「:」と値を書きます。

@mixin ミックスイン名(引数: デフォルト値){・・・}　

// ミックスインを定義
@mixin test-border($color, $width: 1px) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

// ミックスインを呼び出し
#test{
	@include test-border(blue); // $widthの値を省略
	}
#test2{
	@include test-border(blue, 3px);
	}	
 
/* コンパイル後 */
#test {
  border-color: blue;
  border-width: 1px;
  border-style: dashed;
}

#test2 {
  border-color: blue;
  border-width: 3px;
  border-style: dashed;
}  

「#test」の方では「@include test-border(blue); 」と$widthの値を省略して記述しましたが、$widthにはデフォルト値が予め指定してあるので、コンパイル後のCSSにはデフォルトの1pxが出力されているのが分かります。

また、下記のように引数と値を明示的に表して記述することも可能です。わかりやすくする用。この場合もまたミックスインの定義で引数にデフォルト値を指定している場合は省略可能。

#test03{@include test-border($color: red);}
#test04{@include test-border($color: red, $width: 2px);}

/* コンパイル後 */
#test03 {
  border-color: red;
  border-width: 1px;
  border-style: dashed;
}

#test04 {
  border-color: red;
  border-width: 2px;
  border-style: dashed;
}

また同じミックスインの例ですが、下記のように全ての引数にデフォルト値を指定している場合は、@include時に()自体を省略できますし、()のみを記述することもできます。どちらもコンパイル後のCSSソースは同じになります。

// ミックスインを定義
@mixin test-border($color:blue, $width: 1px) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

#test05{@include test-border;}   // ()を省略
#test06{@include test-border();} // ()だけを記述

/* コンパイル後 */
#test05 {
  border-color: blue;
  border-width: 1px;
  border-style: dashed;
}

#test06 {
  border-color: blue;
  border-width: 1px;
  border-style: dashed;
}

「,(カンマ)」が必要なプロパティには可変長引数「…」を利用

「,(カンマ)」が必要なプロパティ、text-shadowやbox-shadowについてですが、これらの値を引数として使いたい場合は注意が必要。そのまま「,(カンマ)」区切りで値として使用するとエラーになります。

ミックスインでは、引数1つにつき、１つの値しか渡せないというルールがあるそうです。故に「,(カンマ)」区切りで分数の値を渡そうとするとエラーになる、と。

そこで「… (ドット3つ)」という特別な引数を使います。

リファレンス見ながら「Variable Arguments」って何て訳すんやと思ったらしっかり教科書に書いてあったでござる。「…」←可変長引数といいます。

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

/* コンパイル後 */
.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

このように「… (ドット3つ)」の可変長引数を利用することでエラーを回避して意図したとおりにコンパイルできます。

文字列やリストとして値を渡したりすればエラーを出さずに出力できるらしいのですが、やっぱり面倒だし可読性が落ちたりするので、可変長引数「…」を使うのが一番良いっぽいです。

複数の引数を持つミックスインで可変長引数「…」を利用

複数の引数を持つミックスインを@includeする際にも可変長引数「…」を利用することができます。引数の値を一旦任意の変数に「,(カンマ)」区切りで代入しておいて、@include時に引数の()の中に「$変数名…」という形で指定します。

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}

$values: #000, #fff, #f00; // 引数の値を$valuesへ代入

#test{
  @include colors($values...); //$valuesと可変長引数「...」を()へ
}

/* コンパイル後 */
#test {
  color: #000;
  background-color: #fff;
  border-color: #f00;
}

使い回しするミックスインの引数の値をファイルのどこか１か所で管理して任意の場所で呼び出したい時とか、引数の値以外は触られたくない時とかに便利なのかなぁ。

ミックスインのスコープ

ミックスインもスコープを持ちます。
セレクタのルールセット内で定義したミックスインはそのセレクタの中でしか使えません。

#test{
	@mixin testMargin{
		margin:50px;
	}
	.testContents{
		@include testMargin;
	}
	@include testMargin;
}

/* コンパイル後 */
#test {
  margin: 50px;
}
#test .testContents {
  margin: 50px;
}

上の例で「#test」内に書いた@mixin testMarginは「#test」内でしか使えません。外から呼び出そうとするとエラーになります。

@content

「@content」はミックスインにコンテンツブロックを渡すための機能です。渡されたコンテンツブロックは「@content」の位置で展開される。今までの@includeでミックスインを呼び出していたのとはちょっと違う。

リファレンスの例。

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

/* コンパイル後 */
* html #logo {
  background-image: url(/logo.gif);
}

最初なんか意味がわからなかったのですが、「それ」に対してコンテンツブロック(ルールセットやスタイル)をつっこめるという事だと思います。(なんか文章で説明すんのこれも難しいのですが)

目的は記述量を減らす事と可読性を上げる事なので、無理に使う必要はなさそうだけれども、使いこなせたら便利そう。特にハックやメディアクエリの絡むソースとかので威力を発揮できそうです。

Sassの教科書の「レスポンシブWebデザイン対応で楽をするため、@content を活用する」というサンプルがすごくわかりやすかったです。何度も教科書のサンプルソースを引用してくるのも気が引けるのでリンクだけおいておきます。←興味のある方は教科書を買って一緒に勉強しましょうぜというお誘い。

>>スマホ・マルチデバイスで使える | Web制作者のためのSassの教科書 – 公式サポートサイト

ミックスインのスニペットとか色々気になったサイト　まとめ

眺めただけでワクワクしてしまう素敵ミックスインのライブラリとかスニペット集とか。気になったページでブクマしていたもののリストですので、全部試したわけではありませんが、発想のヒントがいっぱい！（compassなど総合的なでっかいフレームワークはとりあえず省いてます）

• Bourbon – A Sass Mixin Library
• Animate Mixin for Compass/SASS
• 15 essential Sass mixins | Developer Drive
• 【Sass】新規でサイトを作るのに使えそうなの一式。Ver 1 – CSS HappyLife
• Sassを使ったコーディングの強い味方に！便利なextend＆mixin集を作ってみた | 株式会社LIG
• Sassで作ったオレオレグリッドシステムが便利過ぎる。 | 90zbear.com
• Sache: Find Sass and Compass Extensions for your next project
• This gist demonstrates some uses of the new sass feature: Passing content blocks to mixins.
• nonakaryuichi/scss_media_queries · GitHub
• CSS3 buttons by Chad Mazzola
• Z63 | 8 Sass mixins you must have in your toolbox
• matthieua/sass-css3-mixins · GitHub

内容が重複しているようなものもまとめてリストにつっこみましたが、どれも楽しそうでいい感じです。

Sassの勉強　関連記事

• Sassの勉強 #00　もっかい最初からやり直そうSassの巻
• Sassの勉強 #01　Sassとは何か？～環境構築
• Sassの勉強 #02　Sassの基本的な機能「ネスト」
• Sassの勉強 #03　Sassの基本的な機能「変数」
• Sassの勉強 #04　Sassの基本的な機能「演算」
• Sassの勉強 #05　Sassの基本的な機能「@import」
• Sassの勉強 #06　スタイルの継承ができる「@extend」
• Sassの勉強 #07　柔軟なスタイル定義が出来る「@mixin」
• Sassの勉強 #08　制御構文(条件分岐・繰り返し)
• Sassの勉強 #09　@at-root
• Sassの勉強 #10　Sassの勉強 #10　関数一覧(Ver.3.4) と自作関数

@extend 基本

「@extend」は指定したセレクタのスタイルを継承できる機能。ルールセットの中で中で他のセレクタで指定してあるルールをそのまま流用できます。

@extend セレクタ;

書き方はこれでOK。簡単。シンプルな例で見てみると、こんな感じになります。

// .test01のルールセットを.test02へ継承

.test01{
	width:100%;
	background:#f1f1f1;
}

.test02{
	@extend .test01;
}

/* コンパイル後 */
.test01, .test02 {
  width: 100%;
  background: #f1f1f1;
}

コンパイル後は継承元と継承した先のセレクタがグループ化されます。

ほぼ同じスタイルを使いまわしたいけど、1つだけプロパティの値を変更したいなんて場合も簡単です。

.test01{
	width:100%;
	background:#f1f1f1;
}

.test02{
	@extend .test01;
	width:90%;
}

/* コンパイル後 */
.test01, .test02 {
  width: 100%;
  background: #f1f1f1;
}

.test02 {
  width: 90%;
}

共通するプロパティはグループ化され、差分箇所だけが新しいルールセットに収まります。逆に言えばグループ化したくない場合は@extendは使わない方がいいのかも。

@extendが使えるセレクタ

• タイプセレクタ / div、p、strong・・・
• IDセレクタ / #id・・・
• クラスセレクタ / .class・・・
• 連結セレクタ / #id.class・・・
• 擬似クラス / :hover、:first-child・・・
• 擬似要素 / :before、:after・・・
• 属性セレクタ / input[type="text"]、a[href$=".pdf"]・・・

@extendが使えないセレクタ

• 子孫セレクタ(E F) / p strong、#main p・・・
• 子セレクタ(E > F) / .sample > p、p > strong・・・
• 隣接(E + F )セレクタ / h1 + h2、h3 + p・・・
• 間接セレクタ(E ~ F ) / h3 ~ h3、li ~ li・・・

使えないセレクタを継承しようとするとエラーが出る。
なんていうか…複雑なセレクタは@extendは無理って覚える！

但し、ネストされたセレクタ自体に@extendを使うことはできるとのこと。リファレンスの例ではこういうこと。

#fake-links .link {
  @extend a;
}

a {
  color: blue;
  &:hover {
    text-decoration: underline;
  }
}

/* コンパイル後 */
a, #fake-links .link {
  color: blue;
}
a:hover, #fake-links .link:hover {
  text-decoration: underline;
}

便利な使い方 「@extend」専用のSassファイルを使う

「@extend」の基本は上述の通り。これをどう便利に使うか。教科書の説明が分かりやすすぎたので公式サポートサイトからソースをまた拝借して(一部カットしてシンプルにしています)…まずパーシャルを利用して「_extend.scss」というファイルを作る。

// _extend.scss

.btnBase {
	text-align: center;
	margin: 0 0 10px;
	a {
		display: block;
		padding: 10px 20px;
		background: #999;
		color: #fff;
		&:hover {
			background: #ccc;
			color: #333;
		}
	}
}

それをメインのscssファイルにインポートして使う。

// main.scss

@import "extend";

ul.btnList {
	li {
		@extend .btnBase;
	}
}
.item {
	width: 300px;
	.text {
		overflow: hidden;
		.btn {
			@extend .btnBase;
			text-align: left;
		}
	}
}

するとCSSファイルにはこう出力される。

// main.css

.btnBase, ul.btnList li, .item .text .btn {
  text-align: center;
  margin: 0 0 10px;
}
.btnBase a, ul.btnList li a, .item .text .btn a {
  display: block;
  padding: 10px 20px;
  background: #999;
  color: #fff;
}
.btnBase a:hover, ul.btnList li a:hover, .item .text .btn a:hover {
  background: #ccc;
  color: #333;
}

.item {
  width: 300px;
}
.item .text {
  overflow: hidden;
}
.item .text .btn {
  text-align: left;
}

上の例はボタン的なスタイルを当てる内容なのだけれども、こんな感じでベースとなるスタイルを使いまわしして使う箇所毎に少しだけ内容を変更したい際に便利、と。

@extend専用ファイル内のセレクタを最終的なCSSには反映したくないわって場合は後述のプレースホルダーセレクタ「%」を利用すればOK。

@extend専用 プレースホルダーセレクタ「%」

プレースホルダーセレクタ「%」は、@extend利用時にのみ使える特別なセレクタで、コンパイル後にはソースが残らない。

プレースホルダーセレクタを使ってscssファイルにルールを書いておいて@extendで使いまわしして、最終的には無駄なソースは残さずにcssファイルが仕上がる、という仕組み。

>>プレースホルダーセレクタ「%」は先日書いた記事内で紹介しています。

同一ルールセット内で複数継承する

@extendは同じルールセット内で複数指定する事も可能。

.test01{
	color:red;
	font-size:1.1em;
}

.test02{
	border:3px solid #ccc;
}

.sample{
	@extend .test01;
	@extend .test02;
	width:90%;
	margin:0 auto 30px;
}


/* コンパイル後 */
.test01, .sample {
  color: red;
  font-size: 1.1em;
}

.test02, .sample {
  border: 3px solid #ccc;
}

.sample {
  width: 90%;
  margin: 0 auto 30px;
}

複数する場合も使い方は一緒。@extendの後に呼び出したいセレクタを指定。

継承する数が増えてプロパティがバッティングした際は、CSSの個別性の計算通りに後から書かれたスタイルが優先される。

@extendの連鎖

すごくシンプルな例ですが、下記は「.chain01」の中身を「.chain02」内へ継承、更に「.chain02」を「.chain03」内へ継承しています。

.chain01{
	color:red;
}

.chain02{
	@extend .chain01; //.chain01を継承
	font-weight:bold;
}

.chain03{
	@extend .chain02; //.chain02を継承
	margin:10px auto;
}

これをコンパイルすると出力されるCSSソースは以下の通り。

/* コンパイル後 */
.chain01, .chain02, .chain03 {
  color: red;
}

.chain02, .chain03 {
  font-weight: bold;
}

.chain03 {
  margin: 10px auto;
}

「.chain03」で「(.chain01を継承している).chain02」を継承しているので、「.chain01」の中身も「.chain03」へ継承されます。文章で説明するの難しいなコレ。

まぁ要は@extendで継承したルールは継承したセレクタをまた継承することで連鎖していく、と。

この連鎖は便利な面もあるけれども、複雑な内容になればなるほど、本来必要のない無駄な継承が増えていく、それをまた上書きしていく必要が出てくる…なんて場合もあるかもなので、ちょっと注意が必要かなとも思いました。

@mediaの内側では外側に書かれているセレクタは継承できない

@extendは@mediaの外で使われているセレクタは継承出来ない。@mediaの中から他のセレクタは@extendで呼び出そうとするとエラーが出ます。

解決方法は、@mediaのルールセットの中に継承したいセレクタを書けば良いとのこと。

逆に@mediaの中に書いたセレクタは@mediaの外からでもエラーなしで継承できます。ががが、コンパイル後は@mediaの中にグループ化されて展開されるのでまたまた困る。ということで…

@mediaの内側の継承と、@mediaの外側の継承は分けて考える！←覚える。

「!optional」フラグ

@extendで存在しないセレクタを継承しようとするとエラーが出ます。それを回避するのが、「!optional」フラグ。

書き方は「!important」のようにプロパティの値の後に書く。

#test{
  @extend .dummy !optional;
}

こんな感じ。そうすると、エラーは出なくなる。同時にその継承させようとした部分は出力されない。

Sassの勉強　関連記事

• Sassの勉強 #00　もっかい最初からやり直そうSassの巻
• Sassの勉強 #01　Sassとは何か？～環境構築
• Sassの勉強 #02　Sassの基本的な機能「ネスト」
• Sassの勉強 #03　Sassの基本的な機能「変数」
• Sassの勉強 #04　Sassの基本的な機能「演算」
• Sassの勉強 #05　Sassの基本的な機能「@import」
• Sassの勉強 #06　スタイルの継承ができる「@extend」
• Sassの勉強 #07　柔軟なスタイル定義が出来る「@mixin」
• Sassの勉強 #08　制御構文(条件分岐・繰り返し)
• Sassの勉強 #09　@at-root
• Sassの勉強 #10　Sassの勉強 #10　関数一覧(Ver.3.4) と自作関数