こんにちは、かつコーチです。
今回は、前回に引き続きGridをSassで効率よく書く方法を解説します。
ContainerをSassで効率よく書く方法
gridをCSSで記述してみます。
.col,
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-auto {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.col {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
.row-cols-1 > * {
flex: 0 0 100%;
max-width: 100%;
}
.row-cols-2 > * {
flex: 0 0 50%;
max-width: 50%;
}
.row-cols-3 > * {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.row-cols-4 > * {
flex: 0 0 25%;
max-width: 25%;
}
.row-cols-5 > * {
flex: 0 0 20%;
max-width: 20%;
}
.row-cols-6 > * {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.col-auto {
flex: 0 0 auto;
width: auto;
max-width: 100%;
}
.col-1 {
flex: 0 0 8.33333333%;
max-width: 8.33333333%;
}
.col-2 {
flex: 0 0 16.66666667%;
max-width: 16.66666667%;
}
.col-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-4 {
flex: 0 0 33.33333333%;
max-width: 33.33333333%;
}
.col-5 {
flex: 0 0 41.66666667%;
max-width: 41.66666667%;
}
.col-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-7 {
flex: 0 0 58.33333333%;
max-width: 58.33333333%;
}
.col-8 {
flex: 0 0 66.66666667%;
max-width: 66.66666667%;
}
.col-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-10 {
flex: 0 0 83.33333333%;
max-width: 83.33333333%;
}
.col-11 {
flex: 0 0 91.66666667%;
max-width: 91.66666667%;
}
.col-12 {
flex: 0 0 100%;
max-width: 100%;
}これにメディアクエリも加わると記述するのが大変です。
そこで、このようなCSSクラスの指定をSassで効率よくまとめることができます。
特に、グリッドシステムのような列数に基づくデザインは、
Sassの@forループや@mixinを使ってシンプルに記述可能です。
さらに、メディアクエリ対応のコードも含めて効率的に管理できます。
以下は、Sassで最適化した例です。
// グリッドシステムのブレークポイント
$breakpoints: (
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
);
// カラムの幅計算
@mixin generate-grid-columns($prefix, $count) {
@for $i from 1 through $count {
.#{$prefix}-#{$i} {
flex: 0 0 #{100% / $count * $i};
max-width: #{100% / $count * $i};
}
}
}
.container,
.col,
.col-auto {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.col {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
// カラムのサイズ指定
@include generate-grid-columns('col', 12);
.col-auto {
flex: 0 0 auto;
width: auto;
max-width: 100%;
}
// row-cols 用の定義
@mixin generate-row-cols($count) {
.row-cols-#{$count} > * {
flex: 0 0 #{100% / $count};
max-width: #{100% / $count};
}
}
@include generate-row-cols(1);
@include generate-row-cols(2);
@include generate-row-cols(3);
@include generate-row-cols(4);
@include generate-row-cols(5);
@include generate-row-cols(6);
// 各ブレークポイントに対応するカラムサイズを定義
@each $breakpoint, $min-width in $breakpoints {
@media (min-width: $min-width) {
.#{$breakpoint},
.#{$breakpoint}-auto {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
@include generate-grid-columns($breakpoint, 12);
}
}
このSassのポイント：
@mixin generate-grid-columns:$prefixと$countを引数に取り、カラムを自動生成します。col-1からcol-12までの幅を計算し、対応するクラスを生成します。
@mixin generate-row-cols:row-colsのクラスを指定して、列幅を計算し、それに基づくクラスを自動生成しています。
@eachでブレークポイントに対応:- ブレークポイントごとに
colやcol-autoのクラスを生成し、メディアクエリ内で列幅を調整します。各ブレークポイントに対してcol-lg-1,col-md-1などのクラスを自動で生成できます。
- ブレークポイントごとに
- 可読性と保守性の向上:
@forと@mixinを活用することで、手動で列幅やメディアクエリごとにクラスを記述する必要がなく、効率よく管理できます。
これで、同じようなスタイルの繰り返し記述を大幅に減らし、保守性を高めることができます。
また、必要に応じて簡単にブレークポイントやカラム数を変更できます。
まとめ
以上、Sassを使ってGridを効率よく書く方法を解説しました。
備忘録で記しておきます。
参考にしてください。
