SCSS / SASS : 쉼표로 구분하여 클래스 목록을 동적으로 생성하는 방법

SCSS / SASS : 쉼표로 구분하여 클래스 목록을 동적으로 생성하는 방법

---

동적 그리드 시스템을 만들기 위해 SASS의 SCSS 구문을 사용하고 있지만 문제가 발생했습니다.

그리드 시스템을 다음과 같이 완전히 동적으로 만들려고합니다.

$columns: 12;

그런 다음 다음과 같은 열을 만듭니다.

@mixin col-x {
  @for $i from 1 through $columns {
  .col-#{$i} { width: $column-size * $i; }
  }
}

출력되는 내용 :

.col-1 {
    width: 4.16667%;
  }

.col-2 {
    width: 8.33333%;
}
etc...

이것은 잘 작동하지만 다음에 하고 싶은 것은 선택한 $ columns 수에 따라 쉼표로 구분 된 긴 열 클래스 목록을 동적으로 생성하는 것입니다. 예를 들어 다음과 같이 표시하고 싶습니다.

.col-1,
.col-2,
.col-3,
.col-4,
 etc... {
float: left;
}

나는 이것을 지쳤다 :

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

그러나 출력은 다음과 같습니다.

.col-1 {
  float: left;
}
.col-2 {
  float: left;
}
etc...

나는 여기 논리와 이와 같은 것을 만드는 데 필요한 SCSS 구문에 약간 붙어 있습니다.

누구에게 아이디어가 있습니까?

감사

---

을 (를) 살펴보고 싶을 것 같습니다 @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;

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

@extend in the docs.

Hope this helps!

---

There's also a way to do what your question is specifically asking for: generate (and use) a list of classes with commas separating them. D.Alexander's response totally works in your situation, but I'm posting this alternative in case there's another use case for someone looking at this question.

Here's a Pen demonstrating: http://codepen.io/davidtheclark/pen/cvrxq

Basically, you can use Sass functions to achieve what you want. Specifically, I'm using append to add classes to my list, separated by commas, and unquote to avoid compilation conflicts with the period in the classnames.

So my mixin ends up looking like this:

@mixin col-x {
  $col-list: null;
  @for $i from 1 through $columns {
    .col-#{$i} {
      width: $column-size * $i;
    }
   $col-list: append($col-list, unquote(".col-#{$i}"), comma);
  }
  #{$col-list} {
    float: left;
  }
}

Hope that helps somebody.

---

thnx to @davidtheclark here is a more generic version:

@mixin attr-x($attr, $attr-count: 10, $attr-steps: 10, $unit: '%') {
    $attr-list: null;
    @for $i from 1 through $attr-count {
        $attr-value: $attr-steps * $i;

        .#{$attr}#{$attr-value} {
            #{$attr}: #{$attr-value}#{$unit};
        }

        $attr-list: append($attr-list, unquote(".#{$attr}-#{$attr-value}"), comma);
    }

    #{$attr-list} {
        //append style to all classes
    }
}

Use it like this:

@include attr-x('margin-left', 6, 5, 'px');
//or
@include attr-x('width');

The result looks like this:

.margin-left5 {
  margin-left: 5px; }

.margin-left10 {
  margin-left: 10px; }

...

.margin-left30 {
  margin-left: 30px; }

.width10 {
  width: 10%; }

.width20 {
  width: 20%; }

...

.width100 {
  width: 100%; }

ReferenceURL : https://stackoverflow.com/questions/19087811/scss-sass-how-to-dynamically-generate-a-list-of-classes-with-commas-separating