Sassでいこう！
最近はもうほんとSassなしでCSSベタ書きするのは苦行にしか感じない今日この頃。
今日はWordPressのテーマを作る際なんかにも役立つSassのテクニックをご紹介。
でも、その前に……
Sassとは？
このブログではSassについて触れたことがなかったので、最初に軽く説明しておきます。
「Sassは世界で最も成熟し、安定した、かつ強力なプロ級のCSS拡張言語です」
一言で言うと「CSSをラクに便利に書けるようになるもの」で、Sassを全く知らない人にその魅力を語るのは、次のサンプルソースを見てもらうと良いかと思います。
.content p {
font-size: 1rem;
line-height: 1.4em;
}
.content strong {
color: #f44336;
}
.content a {
color: #f44336;
}
.content a:hover {
text-decoration: none;
}
「何回.contentって書かすねん！」って思いません？
それに、「color: #f44336」って入れてますけど、RGB数値に不慣れな人だと大体どんな色なのかも分かりにくいですし、他の場所で同じ色を使うのにいちいちRGB数値覚えてられませんよね。
そこでSassの出番です。Sassを使ってSCSS形式で記述すると、こんなカンジで書けちゃいます。
$Primary: #f44336;
@import '_colors';
.content {
p {
font-size: 1rem;
line-height: 1.4em;
}
strong {
color: $Primary;
}
a {
color: $Primary;
&:hover {
text-decoration: none;
}
}
}
こんな風に色番号に対してプログラム言語のように変数名をつけたり、色の名前だけを書いた別ファイルを引っ張り込んできて利用したりできるようになります。
まだまだこんなのは序の口で、mixinや関数、数値演算、継承、ループなど、CSSを記述するためにプログラミングの概念を利用して便利に快適に書くことができるようになります。
現在のところInternetExplorerやSafari、Firefox、GoogleChromeなどのブラウザで直接Sass用のファイルを認識することはできませんので、これをSassを使って普通のCSSファイルに変換してから使います。
今回はextend（継承）のお話
いよいよ今回の本題なんですが、Sassの@extendってすごい便利なんですよ。
たとえば、こんなHTMLが書かれていた場合で考えてみましょう。
<a>Submit</a>
<a>Reset</a>
次のような要件でスタイルを書く場合、あなたならどう書きますか？
- SubmitとResetは同じようにボタンのような形状にする
- SubmitとResetでボタンの色を変化させる
スタイルに応じたclassを作る
<a class="btn-submit">Submit</a>
<a class="btn-reset">Reset</a>
.btn {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #fff;
text-decoration: none;
text-align: center;
padding: 1em;
margin-bottom: 10px;
}
.btn-block {
display: block;
}
.btn-submit {
background-color: #f44336;
}
.btn-reset {
background-color: #536dfe;
}
スタイルに応じたclassを作成するのは、Bootstrapなどのフレームワークでよく用いられている手法です。
CSSファイルであらかじめ記述しておいたclass名をHTMLファイルの各要素に記述してスタイルを適用しています。
この手法はHTML側でスタイルを選ぶことができ、CSSファイルの肥大化も防ぐことができるのが特徴です。
しかし、細かな違いをつけるためにclassが増えてしまうため、HTML要素内にclass名がゴチャゴチャとついてしまう場合があるのが難点です。
mixinで共通したスタイルを設定する
<a class="btn-submit">Submit</a>
<a class="btn-reset">Reset</a>
@mixin outputBtnBase() {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #fff;
text-decoration: none;
text-align: center;
padding: 1em;
margin-bottom: 10px;
}
.btn-submit {
@include outputBtnBase();
background-color: #f44336;
}
.btn-reset {
@include outputBtnBase();
background-color: #536dfe;
}
２つ目の方法は、Sassのmixinを使って１種類のスタイル記述を使い回す方法です。
.btn-submitと.btn-resetで共通の部分をmixin内に記述しておき、includeでそれぞれに呼び出して使い回すことができます。
これなら他に.btn-disabledとか.btn-warningとかを作ってもスッキリ書ける……と、思ったでしょ？
実はこの方法には欠点があるんです。
.btn-submit {
display: block;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #fff;
text-decoration: none;
text-align: center;
padding: 1em;
margin-bottom: 10px;
background-color: #f44336;
}
.btn-reset {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #fff;
text-decoration: none;
text-align: center;
padding: 1em;
margin-bottom: 10px;
background-color: #536dfe;
}
これはSassを使ってSCSSから普通のCSSに変換したものですが、共通部分のスタイルが各要素に重複して記述されてしまっていますよね。
これでは肝心のCSSファイルが不必要に肥大化してしまう上、ブラウザのDOM InspectorやDeveloper Toolsなどで共通部分を一度に変更してみようと思うとなかなか面倒です。
.btn-disabledとか.btn-warningとかを作って、同じだけの行数が倍々で増えていくと思うと、かなりよろしくないですよね。
また、「display: block;」が共通化部分に入ってしまっているので、他にインラインボタンを作りたい場合にスタイルの上書きが発生するなど、いくつかスマートでない部分が出てきてしまいます。
extendで継承する
<a class="btn-submit">Submit</a>
<a class="btn-reset">Reset</a>
.btn {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #fff;
text-decoration: none;
text-align: center;
padding: 1em;
margin-bottom: 10px;
}
.btn-block {
@extend .btn;
display: block;
}
.btn-submit {
@extend .btn-block;
background-color: #f44336;
}
.btn-reset {
@extend .btn-block;
background-color: #536dfe;
}
extendは他のCSSセレクタに設定されたスタイルを継承することができます。
この例では、先ほどのmixinと同じように、各class内にextendを記述することで別のclassのスタイルが適用されるようになっています。
と、これだけ聞くとまたCSSのほうが肥大化してしまう気がしますよね。でもextendのほうはmixinとは変換のしかたが違うんです。
.btn, .btn-block, .btn-submit, .btn-reset {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #fff;
text-decoration: none;
text-align: center;
padding: 1em;
margin-bottom: 10px;
}
.btn-block, .btn-submit, .btn-reset {
display: block;
}
.btn-submit {
background-color: #f44336;
}
.btn-reset {
background-color: #536dfe;
}
mixinではそれぞれのclassに対して同じスタイルが重複して記述されていましたが、extendでは逆にextendを記述したセレクタが継承元のセレクタに追記され、カンマで区切ったグルーピングセレクタになります。
今回の例では.btnを.btn-blockが継承しているので、.btnの後ろに.btn-blockが追記されています。
さらに.btn-blockを.btn-submitと.btn-submitが継承しているため、.btn-submitと.btn-resetも.btnと.btn-blockの後ろに追記されているのが分かるかと思います。
このようなCSSを記述すれば、無駄にCSSファイルが肥大化することも防ぐことができつつ、HTMLファイルのほうでもclass属性が複雑になることも防げます。
インラインボタンを作る際にも.btn-blockをextendしなければいいだけですので、細かい変化もつけやすくなります。
このように複雑なセレクタをCSSを直接編集して管理するのは大変ですが、Sassを使えば元のSCSSファイルをスッキリ見やすく書けるため、管理もしやすくなります。
SMACSSで書く場合もextendが便利
これで恐らくextendがどのように便利かを見てもらうことができたと思いますが、ここで上級者向けにちょっと難しい話。
SMACSSなどのスタイルガイドに則って記述する場合、基本的には１モジュールに１ファイルのパーシャルを用意しますが、その際にもextendを使えば共通する部分を継承することができます。
extendはSCSSファイルで継承元のセレクタにネストされているセレクタも継承するので、子要素にも継承元のスタイルを適用することが可能です。
詳しくは次のサンプルソースをご覧ください。
@import 'modules/content';
@import 'modules/article';
.content {
h1 {
font-size: 1.6em;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.2em;
}
}
.article {
@extend .content;
}
このように記述してSassをコンパイルすれば、次のようなCSSが出力されます。
.content h1, .article h1 {
font-size: 1.6em;
}
.content h2, .article h2 {
font-size: 1.4em;
}
.content h3, .article h3 {
font-size: 1.2em;
}
WordPressのテーマ製作にも便利
WordPressではプラグインで出力された部分では自分の命名規則と異なる場合がありますよね。
たとえば、他の部分はボタンを「class="btn"」としているのに、プラグインで出力された部分は「class="button"」となっている場合などです。
こういった場合にもSassのextendを使い、.button内に「@extend .btn;」と記述するだけで同じスタイルが適用されます。
extendを使えば再利用性が高くなる
extendを使うと、継承元のソースは何も書き換えずに同じ内容を適用することができます。
これはつまり、継承元のソースを他の案件でもそのまま使い回すことができ、再利用性が高くなることを意味しています。
Sassを試しに書いてみるだけなら、SassMeisterがおすすめ！
冒頭で説明したように、Sassは普通のCSSに変換しないとブラウザから解析することができません。
そのためにSassの変換に必要なものをインストールしないといけないのですが、ちょっと書いて動きを確認してみたいだけの場合にわざわざ環境を作るのは面倒ですよね。
そんなときにはSassMeisterがおすすめです。
ブラウザで書いてすぐに変換できるので、どのように書けばどのようにCSSが出力されるのかを確認するのにはピッタリですよ。