• ..

Parcel

    関数

    1 つ前の記事でpadding: ...だけを返す Mixin を作りましたが、もしかしたらそういう関数を使用したほうが適任かもしれません。関数を使うと値を加工することができます。

    関数は@functionを使って定義できます。また@returnを使って何かしら値を返すようにする必要があります。(JavaScript などに似てます)

    @function gutter($type) {
      // 他で使わないなら入れちゃっても
      $gutters: (
        sp: 0 0.3em,
        pc: 0 1em
      );
    
      // not + $gutters に @type (spかpc) が定義されているか
      // -> $type が sp と pc 以外の値の時
      @if not map-has-key($gutters, $type) {
        @error "#{map-keys($gutters)}を指定してください";
      }
    
      @return map-get($gutters, $type);
    }
    
    div {
      padding: gutter('sp');
    }
    
    @media screen and (min-width: 768px) {
      div {
        padding: gutter('pc');
      }
    }

    制御構文

    @if

    状態には真偽値(boolean)を返すようにします。また、@else if@elseは両略できます。

    @if 状態 {
      // ...
    } @else if 状態 {
      // ...
    } @else {
      // ...
    }

    @each

    連想配列などを回したりできます。汎用セレクタを量産する時とか。

    $colors: (
      success: #018952,
      danger: #ed5e6b
    );
    
    @each $key, $color in $colors {
      .button-#{$key} {
        background: $color;
      }
    }
    /* 結果 */
    .button-success {
      background: #018952;
    }
    
    .button-danger {
      background: #ed5e6b;
    }

    @for

    同じように色々返す時。

    @for $i from 1 through 3 {
      .mt-${i} {
        margin-top: $ipx
      }
    }
    /* 結果 */
    .mt-1 {
      margin-top: 1px;
    }
    
    .mt-2 {
      margin-top: 2px;
    }
    
    .mt-3 {
      margin-top: 3px;
    }

    値を決めたいようなものは@function化すると Mixin の巨大化も防げるかもしれません。