【Sass】便利! extendでwidthを指定するとレスポンシブで小さな幸せが訪れる|Blog|株式会社トライム
【Sass】便利! extendでwidthを指定するとレスポンシブで小さな幸せが訪れる
2016.10.14
![記事サムネイル](https://contents.try-m.co.jp/wp-content/uploads/2016/10/161014_02.jpg)
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 を指定すれば良いだけなので、
個別に設定する必要がなくなり、ちょっと幸せになります。
Contact
お問い合わせ
トライムは常にお客様へ寄りっ沿った提案をさせていただきます。
自社のEC売上の拡大や人材不足などのお客様のデジタル上の課題を、
様々なアプローチにより解決するお手伝いをいたします!
お気軽にお問い合わせください。
03-6403-3259
受付:10:00 - 19:00
![ロゴ](/wp-content/themes/trym/images/top/contact-logo.png)