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

쉼표로 구분된 클래스 목록을 동적으로 생성

SASS에서는 구성 가능한 동적 그리드 시스템을 만드는 것이 어려울 수 있습니다. 그러한 장애물 중 하나는 정의된 열 수에 따라 쉼표로 구분된 열 클래스 목록을 동적으로 생성하는 것입니다.

이를 달성하기 위해 @extend 믹스인을 활용할 수 있습니다. 방법은 다음과 같습니다.

$columns: 12;

%float-styles {
  float: left;
}

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

@include col-x-list;

이 SCSS 코드는 다음을 수행합니다.

• $columns 변수를 정의하여 열 수를 지정합니다.
• 자리 표시자 스타일을 생성합니다. 열에 대해 원하는 속성을 정의하는 시트 규칙 %float-styles 클래스.
• @mixin col-x-list를 활용하여 각 열을 반복하고 정의된 스타일을 해당 열에 적용합니다.
• 원하는 열 목록을 생성하기 위해 col-x-list 믹스인을 포함합니다.

이 접근 방식은 다음과 같이 CSS 출력을 생성합니다. 다음은 다음과 같습니다.

.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;
}

이 출력은 그리드 시스템에 적용할 수 있는 쉼표로 구분된 열 클래스의 동적으로 생성된 목록을 제공합니다.

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