Sass 공간 생성기

모든 웹 프로젝트에서 marign-bottom: 15px 또는 padding: 15px와 같은 UI 디자인을 위한 deferent spacing 클래스가 필요합니다.
이렇게 하면 여백 및 패딩에 대한 여러 간격 클래스를 생성하는 데 도움이 됩니다.

예: 'mt-0' , 'pl-5'

만드는 방법

$spacing: 0, 5, 10, 15, 20; // Modify this to generate your spacing classes
$unit: px; // Modify this to specify your unit eg: em, pt, %.

$directions:(
  l: left,
  t: top,
  r: right,
  b: bottom,
  v: top,
  h: left
);
@mixin generateSpacing($prop, $short  ) {
   @each $space in $spacing{
    .#{$short}a-#{$space} { #{$prop}: $space + $unit}
    @each $key,$val in $directions{
      .#{$short}#{$key}-#{$space} {
        #{$prop}-#{$val}: $space + $unit;
        @if $key == v {
          #{$prop}-bottom: $space + $unit;
        }
        @if $key == h {
          #{$prop}-right: $space + $unit;
        }
      }
    }
  }
}
@include generateSpacing(padding , p);
@include generateSpacing(margin , m);

사용하는 방법

프로젝트에서 sass를 사용하지 않는 경우 github에 기본spacing.css이 포함되어 있으므로 이것을 사용할 수 있습니다.
또는 이 코드를 복사하고 SassMeister , Sass.js 과 같은 온라인 sass 컴파일러를 사용하여 CSS를 생성할 수 있습니다.

첫 번째 문자는 간격 유형( Margin/Padding)을 나타냅니다.

m : 여백

p : 패딩

두 번째 문자는 방향을 나타냅니다.

엘 : 왼쪽

r : 맞아

t : 상단

b : 바닥

v : 수직(상단 및 하단)

h : 가로(좌우)

a : 모두

세 번째는 간격 값을 나타냅니다(사용자가 직접 지정할 수 있음).

예: mb-0는 margin-bottom: 0을 의미합니다.

모델

이것은 생성된 스페이싱 클래스 스타일링 예시가 될 것입니다.


수업
CSS


.ma-0.ma-0 { margin: 0 }
.mt-0.mt-0 { margin-top: 0 }
.ml-0.ml-0 { margin-left: 0 }
.mh-0.mh-0 { margin-left: 0; margin-right: 0 }
.mv-0.mv-0 { margin-top: 0; margin-bottom: 0 }
.pa-5.pa-5 { padding: 5px }
.pb-5.pt-5 { padding-bottom: 5px }
.pr-5.pl-5 { padding-right: 5px }
.ph-5.ph-5 { padding-left: 5px; padding-right: 5px }
.pv-5.pv-5 { padding-top: 5px; padding-bottom: 5px }

간격 값 수정

$spacing 변수를 수정하여 고유한 간격 클래스를 만들 수 있습니다.

$spacing: 0, 5, 10, 15, 20;

간격 단위 수정

$unit 변수를 수정하여 단위를 지정할 수 있습니다(예: em , pt , % ...

$unit: px;