Sassを使ってレスポンシブウェブデザインにする時に覚えておいた方がいいこと4つ

このサイトをメディアクエリー使ってレスポンシブウェブデザインって奴にしてみたんですけど、Sassを使うにあたって、色々思った事や、引っかかった事があるので、まとめてみます。

大きく分けると以下の4つ

ブレイクポイントは変数に

@mediaの後に書くブレイクポイントって長いですよね。Sassの3.1ではできないんですが、最新版の3.2では変数を使う事ができます。

まだalpha版なので、ご使用は自己責任でお願いします。インストールするには、バージョンを指定しないといけません。

gem install sass -v 3.2.0.alpha.275

Sample

SCSS

$small:  "only screen and (max-width:640px)";
$middle: "only screen and (min-width:641px) and (max-width:959px)";
$large:  "only screen and (min-width:960px)";

@media #{$small} {
    //640px以下
}

@media #{middle} {
    //641px〜959pxまで
}
@media #{large} {
    //960px以上
}

こんな感じで、やっとくとわかりやすいかなと。

@mediaはネストできる

@mediaはSassを使うとネストして書けます。僕がSassを使い始めた頃やってみたら出来なかったので、最近のバージョンで出来るようになったっぽいです。3.1かな。

Sample

SCSS

.sample {
    margin:10px;
    @media screen and (min-width: 960px) {
        width:300px;
    }
}

CSS

.sample {
    margin: 10px;
}
@media screen and (min-width:960px) {
    .sample {
        width: 300px;
    }
}

こんな感じで、ネストした場合先祖のセレクターまでたどって出力してくれます。

ネストするとコンパイル後のソースが増える

残念ながら@mediaをネストして記述すると、同じブレイクポイントを設定しても、コンパイル前が分散されているとコンパイル後も分散されたままになっちゃいます。

Sample

SCSS

.sample {
    @media screen and (min-width:960px) { /*同じブレイクポイント*/
        width:96%;
    }
}

.sample2 {
    @media screen and (min-width:960px) { /*同じブレイクポイント*/
        font-size:1.5em;
    }
}

CSS

@media screen and (min-width:960px) {
  .sample {
    width: 96%;
  }
}

@media screen and (min-width:960px) {
  .sample2 {
    font-size: 1.5em;
  }
}

こうなって欲しいけど、ならない

@media screen and (min-width:960px) {
  .sample {
    width: 96%;
  }
  .sample2 {
    font-size: 1.5em;
  }
}

@extendが使えない

@mediaでネストされたプロパティに対しては@mediaの外で定義したクラスを利用した@extendが使えません。これは残念。 @media内に@extendを使うと現時点でははWarningがでて、コンパイルは通りますが、将来的にSass 3.3では完全にエラーになるようです。

Sample

SCSS

.typo {
    font-size:1em;
    text-shadow: 2px 2px 1px #999;
}
@media screen and (min-width:320px) {
    .sample {
        width:100%;
        @extend .typo;
    }
}

CSS

.typo {
    font-size: 2em;
    text-shadow: 2px 2px 1px #999999;
}

@media screen and (min-width:320px) {
    .sample {
        width: 96%;
        /* ここに@extendを記述したはずなのに無い */
    }
}

お分かり頂けるでしょうか。@extendで書いたとこは無視です。なかったことになってます。

@mediaの中で定義したクラスに対しては@extendは使えるのですが、@extendの旨みが激減ですね。

まとめ

結局自分は、@mediaをネストして使うような書き方はしませんでした。
ブレイクポイントは3箇所用意しているので、@mediaの記述はその3パターンを一回ずつ書くだけにした方がよさげ。

@extendは多用してたんですが、@mediaの中ではmixinにして@includeを使った箇所が何箇所かありました。
結論としては、メディアクエリーをSassで使う場合、シンプルにわかりやすくする記述法は用意されてるけど、出力されるCSSは微妙って事でした。

comments powered by Disqus
« Newer Older »