Zenn
🤖

Sass で FLOCSS の Utility に当たる margin, padding を一括で出力する mixin を作った。

2021/04/15に公開
Sass
tech

初投稿です。

僕は CSS を FLOCSS の命名規則にゆるーく沿って Sass で管理していて、その Utility に当たる部分は emma.css を参考に FLOCSS ぽくした独自の命名規則を使っています。

この Utility 、すごく便利なのですが margin や padding 周りはその時の流行りで結構値を変更することがあるので、今まで手書きで書いていたところを一括で変更・出力できるように mixin を使って組んでみました。

※ブレイクポイントも切れるようにしました。@tak_dcxi さんの mixin を丸パクr参考にしました🙏

margin の Utility 一括出力 を例とした mixin

style.scss
@use 'utility/margin';
foundation/_variable.scss
// tak_dcxi さんの mixin をそのまま拝借…
$breakpoints: (
  'xs': (min-width: 0),
  'sm': (min-width: 576px),
  'md': (min-width: 768px),
  'lg': (min-width: 992px),
  'xl': (min-width: 1200px),
  'xxl': (min-width: 1400px)
) !default;

// ほしい分だけ値を追加
$utilityValue:
  0,
  2,
  4,
  8,
  12,
  16,
  20,
  24,
  28,
  32,
  36,
  40,
  48,
  56,
  64,
  72,
  80,
  88,
  96,
  104,
  112,
  120;
foundation/_mixin.scss
@use 'variable' as v;

/**
 * breakpoints
 * ブレイクポイントを定義
 * https://zenn.dev/tak_dcxi
 */
@mixin responsive($breakpoint) {
  @if map-has-key(v.$breakpoints, $breakpoint) {
    @media screen and #{inspect(map-get(v.$breakpoints, $breakpoint))} {
      @content;
    }
  }

  // マップ型で定義されていない値が呼び出された時はエラーを返す
  @else {
    @error "指定されたブレークポイントは定義されていません。" + "指定できるブレークポイントは次のとおりです。 -> #{map-keys(v.$breakpoints)}";
  }
}

/**
 * utility spaces auto create
 * utility で隙間を司る margin, padding の class を variable の utilityValue 分自動で生成
 */
@mixin utilitySpace($propertyName, $propertyPrefix, $angleName, $anglePrefix, $breakpointKey: null) {

  @if ($breakpointKey == null) {
    @each $value in v.$utilityValue {
      .u-#{$propertyPrefix}#{$anglePrefix}#{$value} { #{$propertyName}-#{$angleName}: #{$value + 'px !important'}; }
    }
  } @else {
    @include responsive($breakpointKey) {
      @each $value in v.$utilityValue {
        .u-#{$propertyPrefix}#{$anglePrefix}#{$value}-#{$breakpointKey} { #{$propertyName}-#{$angleName}: #{$value + 'px !important'}; }
      }
    }
  }
}
utility/_margin.scss
@use '../foundation/mixin' as m;

@include m.utilitySpace('margin','m','top','t');
@include m.utilitySpace('margin','m','top','t','md');
@include m.utilitySpace('margin','m','top','t','lg');
@include m.utilitySpace('margin','m','top','t','xl');

結果

.u-mt0 { margin-top: 0px !important; }
.u-mt2 { margin-top: 2px !important; }

/* ~~ 70行ぐらい省略 ~~ */

@media screen and (min-width: 1200px) {
  /* ~~ 20行ぐらい省略 ~~ */
  .u-mt112-xl { margin-top: 112px !important; }
  .u-mt120-xl { margin-top: 120px !important; }
}

おわりに

今まで手動で修正していたので、この mixin 作ってからかなり楽になりましたわ…😭
ちょいとした小技ですが、この記事がお役に経てば幸いです。

参考

Discussion