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

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

SCSS에서 동적 그리드 시스템을 생성하려면 종종 구분된 열 클래스 목록을 생성해야 합니다. 쉼표로. 이는 다양한 열 수에 걸쳐 공통 스타일 적용을 단순화합니다. 그러나 이러한 코드를 작성하는 것은 어려울 수 있습니다.

동적 열 생성

제공된 SCSS 코드는 $columns 변수를 기반으로 열 클래스를 성공적으로 생성합니다. 그러나 이러한 클래스의 쉼표로 구분된 목록을 생성하는 것은 여전히 ​​장애물로 남아 있습니다.

@extend 사용

각 열에 대해 개별 클래스 정의를 생성하는 대신 @를 사용하는 것이 좋습니다. 확장 지시어. 사전 정의된 float 스타일을 확장하는 믹스인을 정의하면 원하는 효과를 얻을 수 있습니다.

%float-styles {
  float: left;
}

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

이 코드에서:

• %float-styles 자리 표시자는 스타일을 정의합니다. 확장됩니다.
• @mixin col-x-list는 다음 목록을 생성합니다.
• @for 루프는 열 번호를 반복합니다.
• 각 클래스는 %float-styles를 확장하여 float 속성을 상속합니다.

결과 CSS

이 접근 방식을 사용하여 생성된 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;
}

%float-styles 자리 표시자에서 float 속성을 상속하는 클래스의 쉼표로 구분된 목록을 제공합니다. @extend를 활용하면 원하는 기능을 유지하면서 코드를 단순화할 수 있습니다.

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