Blog

Sass(Scss) : メディアクエリ用のミックスイン

、『Sass入門 〜より効率的なCSSコーディング』(※電子書籍のみです)にSass 3.2の内容を追加したので、記念にメディアクエリ用のミックスインを作りました。

@mediaルールを都度記述するのは面倒ですし、同じ要素やモジュールのスタイルを各@mediaルールに分けて書くことも面倒です。今回作ったミックスインを使えば、これらの問題を解決することができます。

出力したいCSSの例

例えば次のようなCSSを出力したい場合があるとします。

CSS
/* 全てに適用 */
h1 { width: 100%; }
p { line-height: 1.4; }

/* 主にPC用 */
@media only screen and (min-width: 801px) {
  h1 { color: red; }
  p { margin: 1em 0; }
}

/* タブレット用 */
@media only screen and (min-width: 481px) and (max-width: 800px) {
  h1 { color: blue; }
  p { margin: 0.8em 0; }
}

/* スマートフォン用 */
@media only screen and (max-width: 480px) {
  h1 { color: green; }
  p { margin: 0.6em 0; }
}

これを2種類の方法で書くことができます。

  1. 要素やモジュール単位で書く方法
  2. メディア特性ごとにスタイルを書く方法

両方とも@include mq {}の中にスタイルを書き、@mediaの代わりに@ifで分けます。

1. 要素やモジュール単位でスタイルを書く方法

Scss
@include mq {
    h1 {
        @if $mq-all { // 全てに適用
            width: 100%;
        }
        @if $mq-default { // 主にPC用
            color: red;
        }
        @if $mq-tablet { // タブレット用
            color: blue;
        }
        @if $mq-sp { // スマートフォン用
            color: green;
        }
    }
    p {
        @if $mq-all {
            line-height: 1.4;
        }
        @if $mq-default {
            margin: 1em 0;
        }
        @if $mq-tablet {
            margin: 0.8em 0;
        }
        @if $mq-sp {
            margin: 0.6em 0;
        }
    }
}

2. メディア特性ごとにスタイルを書く方法

Scss
@include mq {
    @if $mq-all { // 全てに適用
        h1 {...}
        p {...}
    }
    @if $mq-default { // 主にPC用
        h1 {...}
        p {...}
    }
    @if $mq-tablet { // タブレット用
        h1 {...}
        p {...}
    }
    @if $mq-sp { // スマートフォン用
        h1 {...}
        p {...}
    }
}

1つの要素やモジュールのスタイルを一箇所に記述できるので、どちらかと言えば1つ目の方法が好みですが、場合によっては2つ目の方法も使うと良いと思います。

実は、この2つの方法を一緒に使うこともできます。

2つの方法を一緒に使う

例えば、スマートフォン向けにスタイルの追加や上書きをまとめて書きたい場合は@if $mq-sp {}の中にまとめてスタイルを書いたほうがラクです。

次のコードではh1は1つ目の方法で、それ以外は2つ目の方法で書いています。

Scss
@include mq {
    h1 {
        @if $mq-tablet {
            color: blue;
        }
        @if $mq-sp {
            color: green;
        }
    }
    @if $mq-sp {
        header { background: url(...); }
        p { margin: 0.6em 0; }
        nav { width: 100%; }
            :
    }
}

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

CSS
@media only screen and (min-width: 481px) and (max-width: 800px) {
  h1 {
    color: blue;
  }
}
@media only screen and (max-width: 480px) {
  h1 {
    color: green;
  }

  header {
    background: url(...);
  }

  p {
    margin: 0.6em 0;
  }

  nav {
    width: 100%;
  }
    :
}

h1の中で書いたスマートフォン用のスタイルも同じ@mediaルール内に出力されています。

このように、スタイルを書く場所が仮にバラバラであっても、メディア特性ごとの@mediaルール内にまとめられるのもこのミックスインの特長です。無駄な@mediaルールが出力されないのでCSSのファイルサイズを減らすことができます。

スタイルの出力を変数で制御しているので、@if文で2つ以上の変数を利用することで次のようなことができるのもこのミックスインの特長です。

2つの任意のメディア特性に同じスタイルを適用したい場合

同じコードを2箇所以上に書くのは避けたいところですが、タブレットとスマートフォンに同じスタイルを適用したいといった場合は次のようにします。

Scss
@include mq {
    h1 {
        @if $mq-tablet {
            margin: 0;
        }
        // タブレット "と" スマートフォンですが、
        // and ではなく or を使います
        @if $mq-tablet or $mq-sp {
            color: blue;
        }
    }
}

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

CSS
@media only screen and (min-width: 481px) and (max-width: 800px) {
  h1 {
    margin: 0;
    color: blue;
  }
}
@media only screen and (max-width: 480px) {
  h1 {
    color: blue;
  }
}

color: blue;はタブレット用とスマートフォン用の@mediaルール内に出力されています。当然、タブレット用のh1のスタイルはまとめられています。

メディア特性ごとにCSSファイル自体を分ける場合

メディア特性ごとにCSSファイル自体を分けてlink要素でそれぞれのファイルを読み込ませたい場合は次のようにします。

まず、スタイルを記述するパーシャルファイルを用意します(ここでは_mq.scssとします)。スタイルは要素やモジュール単位でも良いですし、メディア特性ごとに書いても良いです。

Scss
[_mq.scss]
h1 {
    @if $mq-all {
        width: 100%;
    }
    @if $mq-default {
        color: red;
    }
    @if $mq-tablet {
        color: blue;
    }
    @if $mq-sp {
        color: green;
    }
}
p {
    @if $mq-all {
        line-height: 1.4;
    }
    @if $mq-default {
        margin: 1em 0;
    }
    @if $mq-tablet {
        margin: 0.8em 0;
    }
    @if $mq-sp {
        margin: 0.6em 0;
    }
}

これを次のように各ファイルで読み込ませます。

Scss
[default.scss]
$mq-all: true;
$mq-default: true;
@import "mq";

[tablet.scss]
$mq-all: true;
$mq-tablet true;
@import "mq";

[sp.scss]
$mq-all: true;
$mq-sp true;
@import "mq";

コンパイル後のdefault.cssは次のようになります。

CSS
h1 {
  width: 100%;
  color: red;
}
p {
  line-height: 1.4;
  margin: 1em 0;
}

複数ファイルを@importしても問題ないので、スタイルをカテゴリごとや作業者ごとなど、別々のファイルに分けて管理することもできます。

ミックスインと設定用の変数

最後にそのミックスインと設定用の変数についてです。

ミックスインmqでは実は4つのミックスインを@includeして、それぞれに@contentでスタイルを渡しているだけです(@contentについては『Sass入門』を読んでもらうとして...)。とりあえず次に挙げるものが全てのコードになります。

Scss
// # Media Queries
//
// ## Breakpoints (Window Size)
//
// 0-480   : [Smartphone]
//           iPhone3/4/5(Portrait), iPhone3/4(Landscape)
//           Most Android Phone(Portrait)
// 481-800 : [Tablet, Smartphone(Landscape)]
//           iPhone5(Landscape), iPad(Portrait)
//           Most Android Phone(Landscape)
//           Newer Android Tablet(Portrait)
// 801+    : Default, iPad(Landscape), Newer Android Tablet(Landscape)
//  OR 801-1024
// 1025+   : Large Window Size, Newer Android Tablet(Landscape)

// ## Variables
$mq-all    : null !default;
$mq-sp     : null !default;
$mq-tablet : null !default;
$mq-default: null !default;
$mq-large  : null !default;

$default-mq-sp-max-width     : 480px !default;
$default-mq-tablet-min-width : $default-mq-sp-max-width + 1 !default;
$default-mq-tablet-max-width : 800px !default;
$default-mq-default-min-width: $default-mq-tablet-max-width + 1 !default;
$default-mq-large-min-width  : 1025px !default;
$default-mq-default-max-width: null !default;
// $default-mq-default-max-width: $default-mq-large-min-width - 1 !default;

// ## Wrapper
@mixin mq {
    @include mq-all     { @content; }
    // @include mq-large   { @content; }
    @include mq-default { @content; }
    @include mq-tablet  { @content; }
    @include mq-sp      { @content; }
}

// ## For All
@mixin mq-all {
    $_tmp: $mq-all;
    $mq-all: true;
    @content;
    $mq-all: $_tmp;
}

// ## For Smartphones
@mixin mq-sp(
    $max: $default-mq-sp-max-width
) {
    $_tmp: $mq-sp;
    $mq-sp: true;
    @media only screen and (max-width:#{$max}) {
        @content;
    }
    $mq-sp: $_tmp;
}

// ## For Tablets
@mixin mq-tablet(
    $min: $default-mq-tablet-min-width,
    $max: $default-mq-tablet-max-width
) {
    $_tmp: $mq-tablet;
    $mq-tablet: true;
    @media only screen and (min-width:#{$min}) and (max-width:#{$max}) {
        @content;
    }
    $mq-tablet: $_tmp;
}

// ## For PC (default)
@mixin mq-default(
    $min: $default-mq-default-min-width,
    $max: $default-mq-default-max-width
) {
    $_tmp: $mq-default;
    $mq-default: true;
    $_breakpoint: "(min-width:#{$min}) ";
    @if not($max == null) {
        $_breakpoint: $_breakpoint + "and (max-width:#{$max}) ";
    }
    @media only screen and #{$_breakpoint}{
        @content;
    }
    $mq-default: $_tmp;
}

// ## For Large Window
@mixin mq-large(
    $min: $default-mq-large-min-width
) {
    $_tmp: $mq-large;
    $mq-large: true;
    @media only screen and (min-width:#{$min}) {
        @content;
    }
    $mq-large: $_tmp;
}

ブレイクポイントについては制作するサイトの仕様に合わせて設定用の変数の値を適宜変更します。また、これまでのサンプルでは触れていませんが、大きめのウィンドウサイズ用のミックスインと変数のように必要に応じて別のものを新たに追加することもできるようになっています。

子のミックスイン

ミックスインmq@includeされている4つのミックスインについてですが、行なっていることはほとんど同じなのでmq-tabletを説明することにします。

Scss
// ## Variables
$mq-tablet : null !default;

$default-mq-sp-max-width     : 480px !default;
$default-mq-tablet-min-width : $default-mq-sp-max-width + 1 !default;
$default-mq-tablet-max-width : 800px !default;

// ## For Tablets
@mixin mq-tablet(
    $min: $default-mq-tablet-min-width,
    $max: $default-mq-tablet-max-width
) {
    $_tmp: $mq-tablet;
    $mq-tablet: true;
    @media only screen and (min-width:#{$min}) and (max-width:#{$max}) {
        @content;
    }
    $mq-tablet: $_tmp;
}

ミックスインmq-tabletでは変数$mq-tabletの値を一時的に$_tmpに保存しておいてからtrueにしています。そのあと、@mediaルールの中に@content;があるのでここにスタイルが展開されますが、その時に@if $mq-tablet {}の中のスタイルだけが出力されます。そして、最後に保存しておいた$mq-tabletの値を戻しています(外で設定された値を変えないようにしています)。

実は、子のミックスインは単体でも使うことができます。@mediaルールが@includeする度に出力されてしまいますが、局所的に使う場合には@mediaルールを書くよりもラクなので便利だと思います。

Scss
h1 {
    width: 100%;
      :
    @include mq-tablet {
        color: blue;
    }
}
コンパイル後のCSSは次のようになります。
CSS
h1 {
  width: 100%;
    :
}
@media only screen and (min-width: 481px) and (max-width: 800px) {
  h1 {
    color: blue;
  }
}

以上ですが、それにしてもメディアクエリって面倒ですね...。

Sass(Scss) Memo: 出力形式 compressed

Sassにはいくつかの出力形式がありますが、今回はcompressedについてです。
どのように出力されるのか見ていきます。

よくありそうなスタイルの記述

Scss
element+element {
    margin: 0.5em 0;
    padding: 0px;;;
    border: none;
    background-color: rgb(0,0,0);
    color: #ffffff; ;;

}
selector {
; // 空の宣言ブロック
}
CSS
element + element{margin:0.5em 0;padding:0px;border:none;background-color:black;color:#ffffff}
  • 余計な改行や空白は削除されます。
    例外として、セレクタの結合子(+ や >)の前後には空白が挿入されます。
  • 最後のプロパティのセミコロン(;)や余分なセミコロンが削除されます。
  • カラーコードは6桁のまま出力されます。3桁にはなりません。
    ただし、Mixinを通したものはどの出力形式でも条件によって出力される値が変わります。
  • rgbは可能なものはカラーコードに変換されます。
  • 0pxは0にはならず、そのまま0pxで出力されます。
  • noneは0にならず、そのままnoneで出力されます。
  • 0.5emは.5emにはならず、そのまま0.5emで出力されます。
  • 空の宣言ブロックは出力されません。

CSS/Sassコメント

Scss
selector-1 {
    margin: 0;
}
/*
 * 複数行CSSコメント
 * 複数行CSSコメント
 */
selector-2 {
    /* 1行CSSコメント */
    // Sassコメント
    padding: 0;
}
/*!
 * !付きの複数行CSSコメント
 * !付きの複数行CSSコメント
 */
selector-3 {
    /*! !付きの1行CSSコメント */
    color: red;
}
body /*! */ element {
    width: 100px;
}
CSS
selector-1{margin:0}selector-2{padding:0}/*
 * !付きの複数行CSSコメント
 * !付きの複数行CSSコメント
 */selector-3{/* !付きの1行CSSコメント */;color:red}body element{width:100px}
  • CSSコメントは削除されます(Sassコメントはどのコンパイル形式でも削除されます)。
  • 「/*!」から始まるCSSコメントはそのまま残ります。ただし、セレクタ部分に入れた場合は削除されます。

コメント(「/*!」から始めたコメントも)が削除されるので、次に挙げるハックは使用できません。

使用できないコメントを利用したハック

Scss
html[xmlns] > /**/body elements { property: value; }
html > /**/ body elements { property: value; }
/* \*//*/ selector { property: value; } /**/
/* \*/ selector { property: value; } /**/
など

コメントの削除には例外があります。プロパティの後ろにいれたコメントは削除されないので、次に挙げるハックは使用することができます。

使用できるコメントを利用したハック

Scss
selector {
    color/**/: red; // IE7,8,9と他のモダンブラウザ
    color/*\**/: green\9; // IE7,8,9
}
CSS
selector{color/**/:red;color/*\**/:green\9}

ほかのハックはどうでしょうか。気になりますね。。

IE6 スターハック

Scss
* html element { // IE6
    color: red;
}
CSS
* html element{color:red}

問題なし。

IE6 アンダースコアハック

Scss
selector {
    _color: red; // IE6
}
CSS
selector{_color:red}

問題なし。

IE7 スターハック

Scss
*:first-child + html element { // IE7
    color: red;
}
CSS
*:first-child + html element{color:red}

問題なし。

IE6,7 アスタリスクハック

Scss
selector {
    *color: red; // IE6,7
}
CSS
selector{*color:red}

問題なし。

IE6,7 スラッシュハック

Scss
selector {
    /color: red; // IE6,7
}

エラーになります。
変数を使いましょう。でも一番早いのは / の代わりに * を使うことです。

Scss
$slash: "/";

selector {
    #{$slash}color: red; // IE6,7
}
CSS
selector{/color:red}

これで問題なし。

IE \9ハック

Scss
selector {
    color: red\9; // IE6,7,8,9 (10も??)
}
CSS
selector{color:red\9}

問題なし。

IE \0/ハック

Scss
selector {
    font-family: Meiryo, sans-serif\0/; // IE6,7,8,9 (10も??)
}

エラーになります。
変数を使いましょう。

Scss
$hack-ie6to9: "\0/";

selector {
    font-family: Meiryo, sans-serif#{$hack-ie6to9}; // IE6,7,8,9 (10も??)
}
CSS
selector{font-family:Meiryo,sans-serif\0/}

これで問題なし。

セレクタハック 1

Scss
html > body element { // IE7と他のモダンブラウザ
    color: red;
}
CSS
html > body element{color:red}

問題なし。

セレクタハック 2

Scss
html + body element { // IE7と他のモダンブラウザ
    color: red;
}
CSS
html + body element{color:red}

問題なし。

Firefox moz-any-linkハック

Scss
element, x:-moz-any-link {
    color: red;
}
CSS
element,x:-moz-any-link{color:red}

問題なし。

WebKit mediaqueryハック

Scss
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    selector {
      color: red;
    }
}
CSS
@media screen and (-webkit-min-device-pixel-ratio: 0){selector{color:red}}

問題なし。

@importを使ったハック

もう使うことはなさそうですが、これらのハックも使用できません。

@import'style.css'; → @import url(style.css); に整形される。
@import style.css;  → エラーになる。
など

結論

いくつかのハックが使用できなくなりますが、それ以外は特に問題なさそうです。

ただ、GitやSVNなどのバージョン管理ツールでのCSSの差分確認は難しくなると思いますのでご注意を。

font-familyの指定はウェイトなしのアルファベット表記のみでほぼよさそう

下記のコードはフォントの指定によく使われていると思います。

font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック','MS PGothic',sans-serif;

同じフォントを日本語表記とアルファベット表記の両方で指定しているのは、各ブラウザの解釈や挙動が異なるなどの理由からです。ただ、最近のブラウザはどうなんだろうかとちょっと気になったので調べました。

結果としては下記の表になりました。詳細はデモページを見てください。

  • Parallels上のWin7: IE6-8(IE6,7はIETester), Chrome15, Firefox8, Safari5, Opera11
  • Mac OS X 10.6.8: Chrome15, Firefox8, Safari5, Opera11
  • 文字コード: UTF-8
指定方法 IE Chrome Safari Firefox Opera
Win WinMac WinMac WinMac WinMac
日本語表記 × × ×
日本語表記(ウェイトあり) - -× -× -△(*1) -×
アルファベット表記 △(*2)
アルファベット表記(ウェイトあり) - -× -× -△(*1) -
ポストスクリプト × ×× ×× ×× ××
ポストスクリプト(ウェイトあり) - - - -× -×
  • *1: ウェイトは無視され、ウェイトなしのものが適用される。
  • *2: ウェイトありで指定しないと適用されないものもある。

まとめ

ウェイトなしのアルファベット表記だけで多くのブラウザに対応できそうです。
問題が出るかもしれないのはMac Operaだけです。

記事の冒頭で挙げたコードは下記のようにすることができると思います。

font-family: 'Hiragino Kaku Gothic Pro',Meiryo,'MS PGothic',sans-serif;

Mac Operaですが、メイリオ、MS Pゴシックが入ってなければ、sans-serifが最後にあるのでヒラギノ角ゴ Pro W3が適用されます。もしくは、VerdanaやTahomaなどを指定すれば日本語部分はヒラギノになります...。

もしかすると今回の検証だけでは足りないかもしれませんが時間がないので今回はこのへんで。

iOS5なのにposition:fixed;が効かない時に確認すること

なんだかんだでFirefoxメインで制作しているわけですが、とあるページでposition:fixed;が効いてないみたいだよ?と@e_luckさんに教えてもらいまして、、、でちょっと調べてみて気づいたことです。

HTML5 Rocks - Improving the Performance of your HTML5 Appの「The magic CSS bullet」で紹介されていた下記のコードは、指定するとGPUアクセラレーションが有効になるのでパフォーマンス向上の恩恵を受けることができるかもしれない、といったような事が言われています(アニメーションの描画がスムーズになる?)。

GPUアクセラレーションを有効にするスタイル
-webkit-transform: translateZ(0);

ということで、これをbodyタグに指定してたんですが、、position:fixed;にならない原因はこのスタイルでした。これについてはW3CのWDに書いてありました。

The object acts as though position: relative has been specified, but also acts as a containing block for fixed positioned descendants.

CSS 3D Transforms Module Level 3

どおりでfixedを指定していた子孫要素が全部relativeの振る舞いになっちゃってたわけですね。

次のデモページでは親要素に-webkit-transform:translateZ(0);の指定がある場合とない場合の子要素の挙動を確認できます。WebKit系のブラウザでみてください。

デモページをみる

新しいプロパティを使うときは仕様書をちゃんと読んだほうが良さそうですね...。

Sass(Scss) Memo: @mixin

今回は@mixinについてです。
Mixinはスタイル(規則集合や宣言)を定義し、それを再利用することができます。
定義したMixinは@includeでインクルードして使用します。また、Mixinには引数を渡すことができます。

Mixinの利用例

clearfix用のMixinを例に説明します。

まずはMixinを定義します。

Scss
@mixin clearfix {
    *zoom: 1;
    //
    &:after {
        content: "";
        display: block;
        clear: both;
    }
}

これをインクルードして利用します。

Scss
.clearfix {
    @include clearfix;
}

これをコンパイルすると下記のようになります。

CSS
.clearfix {
  *zoom: 1;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

簡単だし、コード管理も楽ですね。

ただ、別のセレクタにも同じコードを適用する場合、@extendを利用することも検討してください。

Scss
.clearfix {
    @include clearfix;
}
.header {
    @extend .clearfix;
}

これをコンパイルすると下記のようになります。

CSS
.clearfix, .header {
  *zoom: 1;
}
.clearfix:after, .header:after {
  content: "";
  display: block;
  clear: both;
}

セレクタをグループ化して出力されるので、セレクタごとにコードが展開される@mixinよりも全体のコード量を減らすことができます。

引数について

引数はMixinの中で変数として使うことができ、CSSのプロパティやプロパティの値、@ifの条件式などに利用することができます。

下記は引数を伴うMixinの例です。

Scss
@mixin sample-mixin($var1, $var2: margin, $var3: false) {
    width: $var1;
    #{$var2}: 0;
    @if $var3 {
        overflow: hidden;
    }
}
  • 引数を複数指定する場合は,(カンマ)で区切ります。
  • 初期値のない引数は初期値がある引数よりも必ず先に書かなければエラーになります($var1: false, $var2だとエラー)。
  • 初期値が指定されていない引数はインクルード時に値を指定しないとエラーになります。

インクルード時の引数の記述例

前述のsample-mixinを例にします。

Mixinの引数の順番通りに指定する

単純にMixinの引数の順番通りに値を指定します。
引数のキーワード($var1や$var2など)を記述する必要がないのでタイプ数が少なくてすみます。
ただ、コードを後で見返したときにMixinによっては引数の値が何なのかが分かりづらいかもしれません。

Scss
.selector {
    @include sample-mixin(100px, padding, true);
}

特定の引数だけ指定する

$var2は初期値を利用して、$var3の値だけ指定します。

Scss
.selector {
    @include sample-mixin(100px, $var3: true);
}

キーワードを使い、順不同で指定する

$var3を記述した後に$var2を記述します。
引数のキーワードを記述すると引数の順番が関係なくなるようです。ただ、コードの見通しが悪くなりそうなので使わないほうが良さそうですが...。

Scss
.selector {
    @include sample-mixin(100px, $var3: true, $var2: padding);

    // 下記のように$var1を最後に記述してもエラーにはなりません。
    @include sample-mixin($var3: true, $var2: padding, $var1: 100px);
}

Mixinを使えば作業をかなり効率化することができますが、複雑すぎると運用・管理のコストを増やしてしまう可能性があるのでバランスを考慮して利用したいですね。