SASS를 사용하여 간격 클래스와 같은 부트스트랩 생성

반응형

지난달 우리는 Angular와 Angular Material로 새로운 프로젝트를 시작했습니다. 시간이 지나면서 몇몇 동료들이 여백과 패딩을 위해 인라인 스타일을 자주 쓰고 있다는 것을 알게 되었습니다.

<div class="margin-top: 5px; margin-bottom: 5px">
    With inline style
    </div>

그들 중 일부는 (나를 포함한) 필요한 모든 구성 요소를 위한 유사한 css 클래스를 만들고 있습니다.

.set-padding {
    padding: 10px 0;
}
.left-spacer {
    margin-left: 10px;
}

 

그때 나는 우리가 마진이나 패딩 클래스와 같은 부트스트랩을 놓치고 있다는 것을 깨달았다. 제 동료 중 한 명이 테일윈드 CSS를 사용하자고 제안했습니다. 그러나 Angular Material은 이미 컴포넌트 라이브러리에 사용하고 있기 때문에 일부 공간 클래스에만 css 프레임워크를 설치하는 것은 확실히 오버킬입니다.

부트스트랩 클래스: 자세히 보기

부트스트랩 4의 설명서에 따르면, 공간 클래스는 다음의 형식을 가지고 있다:

클래스 이름은 xs의 경우 {property}{sides}-{size} 형식을 사용하고 sm, md, lg 및 xl의 경우 {property}{sides}-{breakpoint}-{size} 형식을 사용하여 지정됩니다.

여기서 속성은 다음 중 하나입니다.

 

• m - 여백을 설정하는 클래스의 경우
• p - 패딩을 설정하는 클래스의 경우

여기서 면은 다음 중 하나입니다.

• t - 여백-톱 또는 패딩-톱을 설정하는 클래스의 경우
• b - 여백 맨 아래 또는 맨 아래 패딩을 설정하는 클래스의 경우
• l - 왼쪽 여백 또는 왼쪽 여백을 설정하는 클래스의 경우
• r - 여백 오른쪽 또는 패딩 오른쪽을 설정하는 클래스의 경우
• x - *-왼쪽 및 *-오른쪽을 모두 설정하는 클래스의 경우
• y - *상단과 *하단을 모두 설정하는 클래스의 경우
• 공백 - 요소의 모든 4면에서 여백 또는 여백을 설정하는 클래스의 경우

여기서 크기는 다음 중 하나입니다.

• 0 - 여백 또는 여백을 0으로 설정하여 제거하는 클래스의 경우
• 1 - 여백 또는 패딩을 $spacer * .25로 설정하는 클래스의 경우 (기본값)
• 2 - 여백 또는 패딩을 $spacer * .5로 설정하는 클래스의 경우 (기본값)
• 3 - 여백 또는 여백을 $spacer로 설정하는 클래스의 경우(기본값)
• 4 - 여백 또는 패딩을 $spacer * 1.5로 설정하는 클래스의 경우 (기본값)
• 5 - (기본값) 여백 또는 여백을 $spacer * 3으로 설정한 클래스의 경우
• 자동 - 여백을 자동으로 설정하는 클래스의 경우

 

요구 사항 정의

우리의 초점은 {property}{sides}-{size} 형식의 모든 css 클래스를 생성하는 것이다.

예:

• m-0에서 m-5 및 m-자동
• p-0 ~ p-5
• mt-0, mb-0, ml-0, mr-0 ~ mt-5, ml-5, ml-5 및 mt-auto, mb-auto, ml-auto, ml-auto
• pt-0, pb-0, pl-0, pr-0 ~ pt-5, pb-5, pl-5
• mx-0에서 mx-5로, my-0에서 my-5로, mx-auto, my-auto로
• px-0에서 px-5로, py-0에서 my-5로

이 문서의 범위에 포함되지 않는 {property}{sides}-{breakpoint}-{size} 패턴이 누락되었습니다.

 

SASS 구현

저는 SCSS 구문을 사용할 예정이고, 사용하기에 더 쉽다면 오리지널 SASS도 사용하실 수 있습니다.

새 파일 _spaces.scss를 생성하겠습니다. 부분 sass 파일로 만들고 싶기 때문에 파일 이름은 _로 시작합니다. 부분 sass 파일의 의미를 모르면 sass 가이드를 확인할 수 있습니다.

공간의 기본값을 사용하여 변수 $spacer를 만듭니다.

// _spaces.scss
$spacer: 1rem !default;

 

그런 다음 0에서 5 사이의 키를 사용하여 sass:map을 생성하고 각 키에 대해 계산된 값을 자동 설정합니다.

$spacers: (
    0: 0,
    1: $spacer * 0.25,
    2: $spacer * 0.5,
    3: $spacer,
    4: $spacer * 1.5,
    5: $spacer * 3,
    auto: auto,
  ) !default;

이제 지도를 돌려서 m-0부터 m-5, m-auto까지 클래스를 생성해 봅시다.

@each $key, $value in $spacers {
    // generate m-* classes
    .m-#{$key} {
          margin: #{$value} !important;
    }
}

우리는 또한 이 루프 안에서 패딩 클래스를 생성할 수 있습니다. p-0부터 p-5까지의 클래스를 생성합시다.

 

@each $key, $value in $spacers {
    // generate m-* classes
    .m-#{$key} {
          margin: #{$value} !important;
    }

    // generate p-* classes
    .p-#{$key} {
          padding: #{$value} !important;
    }
}

그러나 이 코드는 .p-auto { padding: auto !important; }도 생성합니다. 그래서 우리는 .p-* 클래스를 생성할 때 자동 키를 제외해야 합니다.

@each $key, $value in $spacers {
    // generate m-* classes
    .m-#{$key} {
          margin: #{$value} !important;
    }

    // generate p-* classes excluding key = auto
    @if $key != auto {
          .p-#{$key} {
                  padding: #{$value} !important;
          }
    }
}

지금까지 다음과 같은 경우를 다루었습니다.

• m-0에서 m-5 및 m-자동
• p-0 ~ p-5

 

다음 두 가지 경우를 중점적으로 살펴보겠습니다.

• mt-0, mb-0, ml-0, mr-0 ~ mt-5, ml-5, ml-5 및 mt-auto, mb-auto, ml-auto, ml-auto
• pt-0, pb-0, pl-0, pr-0 ~ pt-5, pb-5, pl-5

이제는 특정 쪽을 타깃으로 할 수 있는 클래스를 생성해야 합니다. 따라서 모든 면을 포함하는 sass:list를 작성합니다.

$sides: (top, bottom, left, right);

$spacers 맵에 표시되는 각 키에 대해 각 방향/측면을 결합한 클래스를 생성해야 합니다. 따라서 우리는 이와 같은 중첩된 루프가 필요합니다.

 

@each $key, $value in $spacers {
    @each $side in $sides {
          // generate m* classes
          .m#{str-slice($side, 0, 1)}-#{$key} {
                  margin-#{$side}: #{$value} !important;
          }
    }
}

이전과 마찬가지로 이 루프 내에서 패딩 클래스(자동 키 제외)를 생성할 수 있습니다.

@each $key, $value in $spacers {
    @each $side in $sides {
          // generate m* classes
          .m#{str-slice($side, 0, 1)}-#{$key} {
                  margin-#{$side}: #{$value} !important;
          }

          // generate p* classes excluding key = auto
          @if $key != auto {
                  .p#{str-slice($side, 0, 1)}-#{$key} {
                            padding-#{$side}: #{$value} !important;
                  }
          }
    }
}

이제 생성할 두 가지 사례만 남겨두었습니다.

• mx-0에서 mx-5로, my-0에서 my-5로, mx-auto, my-auto로
• px-0에서 px-5로, py-0에서 my-5로

 

x와 y 축에 대한 클래스를 생성하기 위해 새 sass:list를 생성합시다.

$axises: (x, y);

이전과 마찬가지로 $spacer에 표시되는 각 키 값에 대해 $axis 목록에 표시되는 각 축을 결합하여 클래스를 생성해야 합니다. 그래서 중첩된 루프를 다시 사용해야 합니다.

@each $key, $value in $spacers {
    @each $axis in $axises {
          @if $axis == x {
                  // generate classes for x axis

                  // generate mx-* classes
                  .m#{$axis}-#{$key} {
                            margin-left: #{$value} !important;
                            margin-right: #{$value} !important;
                  }

                  // generate px-* classes excluding key = auto
                  @if $key != auto {
                            .p#{$axis}-#{$key} {
                                        padding-left: #{$value} !important;
                                        padding-right: #{$value} !important;
                            }
                  }
          } @else if $axis == y {
                  // generate classes for y axis

                  // generate my-* classes
                  .m#{$axis}-#{$key} {
                            margin-top: #{$value} !important;
                            margin-bottom: #{$value} !important;
                  }

                  // generate py-* classes excluding key = auto
                  @if $key != auto {
                            .p#{$axis}-#{$key} {
                                        padding-top: #{$value} !important;
                                        padding-bottom: #{$value} !important;
                            }
                  }
          } @else {
                  @error "Unknown axis #{$axis}.";
          }
    }
}

사용.

 

프로젝트 설정에서 scss 파일을 지원하는 경우 @use 규칙을 사용하여 이 파일을 루트 스타일 파일로 가져올 수 있습니다.

// styles.scss file, in the same directory of _spaces.scss
@use "./spaces";

컴파일된 css가 필요하면 시스템에 SASS를 설치하고 다음 명령을 사용하여 space.css 파일을 생성할 수 있습니다.

sass _spaces.scss spaces.css

완전한 소스 코드는 여기에서 사용할 수 있습니다.

 

읽어주셔서 감사합니다. 당신의 고마움이 저의 동기부여입니다!

소셜 미디어 팔로우:

• 링크딘: 마제들-이슬람
• 트위터: @mazedul__islam
• 깃허브: 마지드1
• 웹사이트: mazedulislam.com