【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 を指定すれば良いだけなので、
個別に設定する必要がなくなり、ちょっと幸せになります。