SCSS에서 쉼표로 구분된 열 클래스를 동적으로 생성하는 방법은 무엇입니까?

쉼표 구분을 사용하여 열 클래스 목록을 동적으로 생성

그리드 시스템에서는 다음을 기반으로 열 클래스의 동적 목록을 생성하는 것이 일반적인 시나리오입니다. 주어진 수의 열. CSS의 확장인 SCSS는 이러한 시나리오에 대한 강력한 솔루션을 제공합니다. 그러나 원하는 쉼표로 구분된 클래스 목록을 얻는 것이 어려울 수 있습니다.

쉼표로 구분된 열 클래스의 동적 목록을 생성하려면 SCSS의 강력한 @extend 지시어를 활용할 수 있습니다. 작동 방식은 다음과 같습니다.

1. 원하는 스타일로 자리 표시자 클래스를 정의합니다.

%float-styles {
  float: left;
}

2. @extend를 사용하여 해당 스타일을 적용하는 믹스인을 만듭니다. 생성된 열 클래스:

@mixin col-x-list {
  @for $i from 1 through $columns {
      .col-#{$i}-m { @extend %float-styles; }
  }
}

3. 호출 열 클래스를 생성하는 믹스인:

@include col-x-list;

4. 원하는 열 수로 $columns를 정의합니다.

$columns: 12;

이 접근 방식은 원하는 부동 소수점 스타일을 포함하는 쉼표로 구분된 열 클래스 목록입니다. as:

.col-1-m, .col-2-m, .col-3-m, .col-4-m, .col-5-m, .col-6-m, .col-7-m, .col-8-m, .col-9-m, .col-10-m, .col-11-m, .col-12-m {
  float: left;
}

@extend를 사용하면 하나의 선택기에서 다른 선택기로 스타일을 효과적으로 적용할 수 있으므로 코드 중복을 최소화하면서 동적으로 생성된 열 클래스 목록을 얻을 수 있습니다.

위 내용은 SCSS에서 쉼표로 구분된 열 클래스를 동적으로 생성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!