ブレイクポイント別に非表示にさせるクラス
今まで下記のような記述で、PC・SPサイズで表示・非表示をしていましたが、命名が曖昧でわかりにくいと指摘され、確かに「dispaly」ってinlineもあるし、flexもあるしクラス名だけでパッと見て判断は厳しいと感じました。
チームで作業すると他の方の意見もあって自分コードが改善できてすごく楽しい。
.u-display-sp {
display: none;
@include global.mq(md) {
display: block;
}
}
.u-display-pc {
display: inherit;
@include global.mq(md) {
display: none;
}
}
そこで、bootstrapのvisibleとhiddenがわかりやすいとの意見をいただき、コードを参考にしてみました。
// Breakpoint
$screen: (
sm: 320px,
md: 767px,
lg: 1040px
) !default;「@each でBreakpointごとに作っても良さそうです 」と先輩に言われましたが、@each?ってぐらい知らないでscss使っているので、気を遣ってくれた先輩からコードを提供していただきました。（ありがとうございます！！）
@use "foundation/global";
// <p class="u-hidden-md-up">md値より広い幅で非表示</p>
// <p class="u-hidden-lg-down">lg値より狭い幅で非表示</p>
@each $bp in map-keys(global.$screen) {
.u-hidden-#{$bp}-up {
@include global.mq($bp, min) {
display: none;
}
}
.u-hidden-#{$bp}-down {
@include global.mq($bp) {
display: none;
}
}
}
@media (min-width: 321px) {
.u-hidden-sm-up {
display: none;
}
}
@media (max-width: 320px) {
.u-hidden-sm-down {
display: none;
}
}
@media (min-width: 768px) {
.u-hidden-md-up {
display: none;
}
}
@media (max-width: 767px) {
.u-hidden-md-down {
display: none;
}
}
@media (min-width: 1041px) {
.u-hidden-lg-up {
display: none;
}
}
@media (max-width: 1040px) {
.u-hidden-lg-down {
display: none;
}
}先輩にはアドバイザーとして助言をいただけるので、知らないことがいっぱい勉強できて楽しい。
ほんと心強い、頼りにしています。
変更したファイル
https://github.com/syun730/development_dartsass/commit/72c45ea91910b26b57743185d6c83389e86f8d97