【Sass】便利！ extendでwidthを指定するとレスポンシブで小さな幸せが訪れる

• Web Create
• 2016.10.14

width: 100%;

最近はヘッダーやフッターの幅が100%のサイトが主流になりました。

そのため、全体を囲むwrapperを固定幅にすることができなくなり、
要素ごと、個別に幅を指定することが多くなりましたよね。

例えば以下のような構成のページです。

この場合ヘッダーとフッターは100%ですが、その中に入る文字などはmainの幅、
つまり白線の内側に収めなくてはなりません。

すると以下のようなマークアップになります。

HTML

<div id="wrap">

  <heade>
    <div class="inner"></div>
  </heade>
  
  <main></main>
  
  <footer>
    <div class="inner"></div>
  </footer>
  
</div>

SCSS

header {
  width: 100%;
  .inner {
    width: 1200px; //幅を指定
  }
}

main {
  width: 1200px; //幅を指定
}

footer {
  width: 100%;
  .inner {
    width: 1200px; //幅を指定
  }
}

@media screen and (max-width: 768px) {

  header {
    .inner {
      width: auto; //幅を指定
    }
  }

  main {
    width: auto; //幅を指定
  }

  footer {
    .inner {
      width: auto; //幅を指定
    }
  }

}

上の例では幅を指定する箇所がレスポンシブを含め、計6回出てきました。
これだと修正が入ったときにはひとつずつ、手作業で数値を直していくことになります。
大変面倒ですよね。

カンマ区切りで繋げて書いてもよいのですが、
同じセレクタがあちこちに散らばると、それはそれで管理が面倒になります。

extendで対応！

個別に値を指定するのは面倒なので、extendで対応しました。
以下のようにシンプルになりました。

SCSS

%siteWidth {
  width: 1200px;
}

header {
  width: 100%;
  .inner {
    @extend %siteWidth;
  }
}

main {
  @extend %siteWidth;
}

footer {
  width: 100%;
  .inner {
    @extend %siteWidth;
  }
}

@media screen and (max-width: 768px) {

  %siteWidth {
    width: auto;
  }

}

数値が変わっても一番上の %siteWidth を変更するだけで済みます。

レスポンシブ時には %siteWidth に auto を指定すれば良いだけなので、
個別に設定する必要がなくなり、ちょっと幸せになります。