CSS Nite LP32フォローアップ（7）富田 梓さん（LINE）
2014年2月15日、ベルサール九段 イベントホールで開催したCSS Nite LP, Disk 32: Sassのフォローアップとして、富田 梓さん（LINE）の『Sassの日常の運用』セッションのスライドなどをシェアします。
メッセージ、補足（イベント終了直後にいただいたものを再掲）
それに慣れてくると、こんどは「もっとこうしたら楽になるのに」とか「もっとこうしたら綺麗になるのに」といった
更に進んだ欲求や要望がでてくることになります。
本日紹介した内容はすこしだけ高度な内容でしたが、そんな欲求や要望の芽が出てきたときに改めて見なおしていただくと、新たな発見があるかと思います。
Sassを理解するためには、とにかく実際に使ってみることがなによりの第一歩です。
今日参加されてSassに興味をもった方は、まずはインストールしてその第一歩を踏み出してみてはいかがでしょうか。
補足
本日のスライドの中で触れた「プレースホルダーセレクター」について説明いたします。
プレースホルダーセレクタとは、extendされた時だけ効果を発揮する特殊なセレクタです。
「.」で指定するクラスセレクタや、「#」で指定するIDセレクタと同じように、プレースホルダーセレクタは「%」で指定します。
extendを使っていると、「extendされるためだけ」で、単体では利用されないクラスを作る場合があります。
普通にextendをつかうと、そのHTML側には利用されない無駄なクラス名が、extendしたクラスとともに出力されてしまいます。
プレースホルダーセレクターを使うと、この無駄なクラス名の出力を防ぎ、必要なクラス名だけを出力することができるようになります。
以下のサンプルを御覧ください。
# Sass
'''
/* 通常のextend */
.style01{
width:100px;
height:100px;
}
.boxA{
@extend .style01;
border:1px solid red;
}
.boxB{
@extend .style01;
border:1px solid green;
border-radius:4px;
}
/* プレースホルダーセレクタのextend */
%style02{
width:100px;
height:100px;
}
.boxC{
@extend %style02;
border:1px solid red;
}
.boxD{
@extend %style02;
border:1px solid green;
border-radius:4px;
}
'''
# CSS
'''
/* 通常のextend */
.style01, .boxA, .boxB {
width: 100px;
height: 100px;
}
.boxA {
border: 1px solid red;
}
.boxB {
border: 1px solid green;
border-radius: 4px;
}
/* プレースホルダーセレクタのextend */
.boxC, .boxD {
width: 100px;
height: 100px;
}
.boxC {
border: 1px solid red;
}
.boxD {
border: 1px solid green;
border-radius: 4px;
}
'''
CSSを見ると、通常のextendでは.style01といういらないコードが出力されているのに対し、プレースホルダーセレクタのextendでは、style02といういらないコードは出力されず、style02のスタイルだけが、extendしたコードに継承されているのがわかります。
今回紹介したものの中には、つくりが複雑なmixinも含まれていますが、シンプルなものだと簡単につくれてしまうので、Sassに慣れてきたらぜひつくってみてください。
