さぁ!検索しよう!

Bootstrap4のutilitiesフォルダ内に保存されている「_spacing.scss」に記述されている汎用クラスについてです。

_spacing.scssは、主にmarginpaddingといった間隔に関わる汎用クラスが記述されています。今回はその中にある一部の汎用クラスを解読します。


_spacing.scss

@each $prop,
$abbrev in (margin: m, padding: p) {
    @each $size,
    $lengths in $spacers {
        //$size:0,1,2,3,$lengths:x,y
        $length-x: map-get($lengths, x);
        $length-y: map-get($lengths, y);
        .#{$abbrev}-a-#{$size} {
            #{$prop}: $length-y $length-x !important;
        } // a = All sides
        .#{$abbrev}-t-#{$size} {
            #{$prop}-top: $length-y !important;
        }
        .#{$abbrev}-r-#{$size} {
            #{$prop}-right: $length-x !important;
        }
        .#{$abbrev}-b-#{$size} {
            #{$prop}-bottom: $length-y !important;
        }
        .#{$abbrev}-l-#{$size} {
            #{$prop}-left: $length-x !important;
        }
        // Axes
        .#{$abbrev}-x-#{$size} {
            #{$prop}-right: $length-x !important;
            #{$prop}-left: $length-x !important;
        }
        .#{$abbrev}-y-#{$size} {
            #{$prop}-top: $length-y !important;
            #{$prop}-bottom: $length-y !important;
        }
    }
}

https://v4-alpha.getbootstrap.com/

このコードは、あらゆる方向のmarginpaddingを持った汎用クラスを出力します。

処理内容

margin(padding):m(p)の代入

1つ目の@each処理では、margin(padding)→$propm(p)→$abbrevのように代入します。

@each $prop, $abbrev in (margin: m, padding: p) {

尚、margin,paddingの代入は同時には行われず、1周目の処理(1つ目の@each処理(marginmの代入)、2つ目の@each処理(marginの生成))が終わったら、paddingpの代入が始まります。

1周目、2周目の処理で、$prop$abbrevはそれぞれ以下のように変化します。

  1. $prop:margin,$abbrev:m
  2. $prop:padding,$abbrev:p

$spacersの代入

2つ目の@each処理では、連想配列$spacers内のkey,value$size,$lengthsへの代入から始まります。

$spacersは、_variables.scssに以下のように定義されています。

//$spacer: 1rem !default;
//$spacer-x: $spacer !default;
//$spacer-y: $spacer !default;
$spacers: (
    0: (
        x: 0, 
        y: 0
    ), 
    1: ( 
        x: $spacer-x, 
        y: $spacer-y
    ), 
    2: (
        x: ($spacer-x * 1.5), 
        y: ($spacer-y * 1.5)
    ), 
    3: (
        x: ($spacer-x * 3), 
        y: ($spacer-y * 3)
    )
) !default;

このことから、0~3$size0:(...)~3:(...)$lengthsのように代入されます。1つ目の@each処理と同様、0番目の処理が終わったら、1番目の処理→2番目→3番目と順に行なっていきます。

@each $size, $lengths in $spacers {

1周目~4周目の処理で、$size$lengthsは以下のようになります。

  1. $size:0, $lengths:(x:0,y:0)
  2. $size:1, $lengths:(x:$spacer-x,y:$spacer-y)
  3. $size:2, $lengths:(x:$spacer-x*1.5, y:$spacer-y*1.5)
  4. $size:3, $lengths:(x:$spacer-x*3, y:$spacer-y*3)

map-get()で$lengths内のx,yの値を取得

map-get()で、$lengths内にあるx(y)の値を取得し、$length-x($length-y)に代入します。
ですから、1周目~4周目の処理で$length-x,$length-yは以下のように変化します。

  1. $length-x:0,length-y:0
  2. $length-x:1rem,length-y:1rem
  3. $length-x:1.5rem,length-y:1.5rem
  4. $length-x:3rem,length-y:3rem

数種類のmargin,paddingを持つ汎用クラスを生成

先程の変数を、クラス名やプロパティ名とその値に当てはめ、数種類のmargin,paddingを持つ汎用クラスを生成します。#{}は、変数を値ではなく文字列として使いたい場合に使われます。 なので、今回のコードでは以下のように、クラス名やプロパティの一部として使われています。

.#{$abbrev}-a-#{$size} { #{$prop}:        $length-y $length-x !important; }

コンパイル

コンパイルによって生成されるクラスは以下の通りです。

.m-x-auto {
    margin-right: auto !important;
    margin-left: auto !important;
}

.m-a-0 {
    margin: 0 0 !important;
}

.m-t-0 {
    margin-top: 0 !important;
}

.m-r-0 {
    margin-right: 0 !important;
}

.m-b-0 {
    margin-bottom: 0 !important;
}

.m-l-0 {
    margin-left: 0 !important;
}

.m-x-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.m-y-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.m-a-1 {
    margin: 1rem 1rem !important;
}

.m-t-1 {
    margin-top: 1rem !important;
}

.m-r-1 {
    margin-right: 1rem !important;
}

.m-b-1 {
    margin-bottom: 1rem !important;
}

.m-l-1 {
    margin-left: 1rem !important;
}

.m-x-1 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
}

.m-y-1 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.m-a-2 {
    margin: 1.5rem 1.5rem !important;
}

.m-t-2 {
    margin-top: 1.5rem !important;
}

.m-r-2 {
    margin-right: 1.5rem !important;
}

.m-b-2 {
    margin-bottom: 1.5rem !important;
}

.m-l-2 {
    margin-left: 1.5rem !important;
}

.m-x-2 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
}

.m-y-2 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.m-a-3 {
    margin: 3rem 3rem !important;
}

.m-t-3 {
    margin-top: 3rem !important;
}

.m-r-3 {
    margin-right: 3rem !important;
}

.m-b-3 {
    margin-bottom: 3rem !important;
}

.m-l-3 {
    margin-left: 3rem !important;
}

.m-x-3 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
}

.m-y-3 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
}

.p-a-0 {
    padding: 0 0 !important;
}

.p-t-0 {
    padding-top: 0 !important;
}

.p-r-0 {
    padding-right: 0 !important;
}

.p-b-0 {
    padding-bottom: 0 !important;
}

.p-l-0 {
    padding-left: 0 !important;
}

.p-x-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.p-y-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.p-a-1 {
    padding: 1rem 1rem !important;
}

.p-t-1 {
    padding-top: 1rem !important;
}

.p-r-1 {
    padding-right: 1rem !important;
}

.p-b-1 {
    padding-bottom: 1rem !important;
}

.p-l-1 {
    padding-left: 1rem !important;
}

.p-x-1 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}

.p-y-1 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.p-a-2 {
    padding: 1.5rem 1.5rem !important;
}

.p-t-2 {
    padding-top: 1.5rem !important;
}

.p-r-2 {
    padding-right: 1.5rem !important;
}

.p-b-2 {
    padding-bottom: 1.5rem !important;
}

.p-l-2 {
    padding-left: 1.5rem !important;
}

.p-x-2 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
}

.p-y-2 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.p-a-3 {
    padding: 3rem 3rem !important;
}

.p-t-3 {
    padding-top: 3rem !important;
}

.p-r-3 {
    padding-right: 3rem !important;
}

.p-b-3 {
    padding-bottom: 3rem !important;
}

.p-l-3 {
    padding-left: 3rem !important;
}

.p-x-3 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
}

.p-y-3 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

https://v4-alpha.getbootstrap.com/


以上で、【Bootstrap4】_spacing.scssに記述されている汎用クラスについてを終わります。