1,049 views

この記事は最終更新から 2231日 が経過しています。

1. やりたいこと

前々回の (56) 【Sass入門#1】sassでcssを簡潔に書く。
　前回の (57) 【Sass入門#2】sassでcssを簡潔に書く。 の続き。

前々回、前回で Sassの基本を学んだ。
今回はちょっとだけ実用的な用途で Sassを活用してみたい。

それは…
Sassを使ってメディアクエリを簡潔に書きたい
ということ。

3. やってみる

style.scss

$th-media: (
  'mob': '(max-width: 410px)',
  'tab': '(min-width: 411px) and (max-width: 767px)',
  'pcS': '(min-width: 768px) and (max-width: 1199px)',
  'pcL': '(min-width: 1200px)',
);

@mixin my-media( $dev ) {
  @media #{map-get($th-media, $dev)} {
    @content;
  }
}

.blk{
  @include my-media(pcL){
    font-size: 2rem;
  }
  @include my-media(pcS){
    font-size: 1.8rem;
  }
  @include my-media(tab){
    font-size: 1.5rem;
  }
  @include my-media(mob){
    font-size: 1.2rem;
  }
}

Sassコマンドを実行

sass -t expanded style.scss

こんな風に出力された。
style.css

@media (min-width: 1200px) {
  .blk {
    font-size: 2rem;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .blk {
    font-size: 1.8rem;
  }
}
@media (min-width: 411px) and (max-width: 767px) {
  .blk {
    font-size: 1.5rem;
  }
}
@media (max-width: 410px) {
  .blk {
    font-size: 1.2rem;
  }
}

自分にとっては、これだけでも Sassを使う強い動機になった。
今日までこれをベタベタと手書きで書いているが、結構しんどい…