부트스트랩 백그라운더

부트스트랩에는 요소의 어느 쪽에 여백이나 패딩을 적용할지, 얼마나 많이 레이어링할지(기본 글꼴 크기의 배수)를 결정할 수 있는 여백 및 패딩 기능이 포함되어 있습니다.

즉, 요소에서 기본 글꼴 크기의 3배만큼 상단에 패딩을 추가하려는 경우 요소 상단에 45px의 패딩을 추가합니다[기본 글꼴 크기 15 x 3 = 45px]. pt-3 클래스로 완료됩니다.

문제

Bootstrap 라이브러리는 디자인을 제한하기 때문에 사용하는 것을 좋아하지 않지만 HTML 요소 내에서 직접 마진 및 패딩 조정에 사용되는 것과 동일한 클래스 기능을 원합니다.

Sass의 @each 및 @for 기능

.scss 팬(css 확장자)인 경우 동일한 동작을 위해 전역 스타일시트에 @each 및 @for 메서드를 추가할 수 있습니다.

// Margin
@each $abbr, $name in ("t": "top", "r": "right", "b": "bottom", "l": "left") {
  @for $i from 1 through 20 {
    .m#{$abbr}-#{$i} {
      margin-#{$name}: 1rem * $i;
    }
  }
}

// Padding
@each $abbr, $name in ("t": "top", "r": "right", "b": "bottom", "l": "left") {
  @for $i from 1 through 20 {
    .p#{$abbr}-#{$i} {
      padding-#{$name}: 1rem * $i;
    }
  }
}

무슨 일이야?

배열의 전체 단어와 연결된 정의된 약어

배수의 정의된 한계(1 - 20)

약어 쌍이 배수와 함께 적용되어야 하는 템플릿 리터럴과 함께 적용됨