Sass를 사용한 패딩 및 여백 클래스

Original Post

sass와 루핑 가능성을 활용하여 패딩 및 여백 클래스를 빠르게 만드는 방법.

때로는 왼쪽, 오른쪽, 위쪽 및 아래쪽에 대한 여백 및 패딩 클래스가 필요하며 직접 만들 수도 있지만 지루하고 시간이 오래 걸립니다. 그러나 SASS를 사용하여 이 CSS를 빠르게 만들 수 있습니다. SASS는 CSS Pre-Processor로 유효한 CSS는 아니지만 생성합니다. SASS는 문자열 함수, 변수 및 루프와 같은 다른 유용한 기능입니다.

0ems에서 7ems까지 모든 방향에서 여백 및 패딩 클래스를 만드는 간단한 예제를 살펴보겠습니다.

두 개의 목록을 정의하여 시작하겠습니다. 하나는 em 범위를 보유하고 다른 하나는 방향 문자열을 보유합니다.

$ems: 0, 1, 2, 3, 4, 5, 6, 7
$directions: "", "-bottom", "-top", "-left", "-right"

SASS 목록에서 변수는 이러한 방식으로 정의됩니다. $variableName: itemOne, itemTwo, ... . a로 종료할 필요 없음;
다음으로 중첩된 방식으로 두 목록을 반복합니다. 따라서 모든 방향em에 대해 모든 방향으로 이동합니다.

@each $em in $ems 

    @each $dir in $directions

그런 다음 -top 를 의미하는 t 방향에서 두 번째 문자를 얻습니다. 이렇게 하면 클래스 이름에 전체 단어가 포함되지 않습니다. 슬라이스할 문자열, 시작점 및 끝점을 사용하는 str-slice() 함수를 사용하여 이 작업을 수행할 수 있습니다. SASS 목록 및 문자열은 대부분의 프로그래밍 언어처럼 1가 아닌 0에서 시작하므로 이 점을 염두에 두십시오.

        $dir-in-rule: str-slice($dir, 2, 2)

이제 클래스 만들기부터 시작하겠습니다. 선택자, 규칙 및 값에 변수를 삽입할 수 있기 때문에 SASS에 대한 강력한 부분이 여기에 있습니다. 그래서 단축된 $dir-in-rule를 .m에 더하고 그 뒤에 em 금액을 더합니다. 따라서 이것은 this라고 하는 클래스가 됩니다. mt-1 또는 mb-5는 1em의 margin-top과 5em의 margin-bottom을 의미해야 합니다. 방향""도 정의했기 때문에 모든 방향의 여백을 의미하는 m-3와 같은 결과도 얻게 됩니다.

선택기와 규칙에 변수를 삽입하려면 다음과 같이 해야 합니다. #{$variableName} . 값은 단순히 $ 기호로 변수 이름을 적습니다. em와 같은 일반 문자열을 +와 연결할 수도 있습니다.

유사한 방식으로 수행되는 패딩에 대해서도 이 작업을 수행합니다.

        .m#{$dir-in-rule}-#{$em} 
            margin#{$dir}: $em + em

        .p#{$dir-in-rule}-#{$em} 
            padding#{$dir}: $em + em        

이제 이 코드는 자체적으로 작동하지 않습니다. 먼저 유효한 CSS로 변환해야 합니다. 이 작업은 트랜스필링 또는 변환을 통해 수행됩니다. This 변환기가 정말 좋습니다. 거기에 코드를 입력하면 다음과 같은 결과가 나와야 합니다.

.m-0 {
  margin: 0em; }

.p-0 {
  padding: 0em; }

.mb-0 {
  margin-bottom: 0em; }

.pb-0 {
  padding-bottom: 0em; }

.mt-0 {
  margin-top: 0em; }

... /* There should be 80 Classes like this */

결론

훌륭한! SASS 코드를 사용하여 여백 및 패딩 클래스를 성공적으로 만들었습니다! 이 지식으로 어떻게 더 많은 것을 만들 수 있는지 알아보세요!

전체 코드

$ems: 0, 1, 2, 3, 4, 5, 6, 7
$directions: "", "-bottom", "-top", "-left", "-right"

/* Paddings and Margins */
@each $em in $ems 

    @each $dir in $directions 

        $dir-in-rule: str-slice($dir, 2, 2)

        .m#{$dir-in-rule}-#{$em} 
            margin#{$dir}: $em + em

        .p#{$dir-in-rule}-#{$em} 
            padding#{$dir}: $em + em