FLOCSS에 해당하는 유틸리티를 Sass로 통합 출력한 margin, padding의 믹스를 제작했다.

첫 투고.
나는 CSS를 FLOCSS의 명명 규칙에 따라Sass를 관리했는데 Utility의 일부 참고emma.css에 해당하는 FLOCSS 스타일의 독특한 명명 규칙을 사용했다.
이 유틸리티는 매우 편리하지만 Margin과padding 주위는 때때로 당시의 유행 추세에 따라 구조치를 바꿀 수 있기 때문에 지금까지 쓴 부분을 믹스로 조합하여 통일적으로 변경하고 출력할 수 있도록 했습니다.
※ 포인트를 돌파했다.@tak_dcxi선생님의 믹스를 참고했습니다.🙏
샘플 코드에 Dart Sass 기능이 사용되었습니다!

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; }
}

끝말

지금까지 수동으로 수정했으니까 이 믹스를 하고 나니까 상당히 수월해졌어...😭
작은 테크닉이지만 이 기사를 도울 수 있다면 좋겠네요.

참고 자료

Sass에서 맵 사용(Lenovo 정렬)

@import에서 @use로 Sass 변경 안내

자주 쓰는 Sass mixin과 function의 가벼운 애완동물을 정리해봤어요.