SCSS/SASS: как динамически генерировать список классов с разделяющими их запятыми

Я работаю с синтаксисом SCSS SASS для создания динамической сетки, но я попал в заблуждение.

Я пытаюсь сделать систему сетки полностью динамичной следующим образом:

$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...

Это хорошо работает, но , что я хочу сделать дальше, динамически генерирует длинный список классов столбцов, разделенных запятыми, в зависимости от количества выбранных столбцов - например, я хочу, чтобы это выглядело так:

.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, необходимый для создания чего-то вроде этого.

Есть ли у кого-нибудь идеи?

Спасибо

Ответы

Ответ 1

Я думаю, вы можете взглянуть на @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;
}

@расширяется в документах.

Надеюсь, это поможет!

Ответ 2

Существует также способ сделать то, о чем конкретно задает ваш вопрос: сгенерировать (и использовать) список классов с разделяющими их запятыми. Ответ D.Alexander полностью работает в вашей ситуации, но я публикую эту альтернативу в случае, если есть другой вариант использования для кого-то, кто смотрит на этот вопрос.

Здесь Pen показывает: http://codepen.io/davidtheclark/pen/cvrxq

В принципе, вы можете использовать функции Sass для достижения желаемого. В частности, я использую append для добавления классов в свой список, разделенных запятыми и unquote, чтобы избежать конфликтов компиляции с периодом в именах классов.

Итак, мой миксин выглядит следующим образом:

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

Надеюсь, что кто-то поможет.

Ответ 3

thnx to @davidtheclark - более общая версия:

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

Используйте его следующим образом:

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

Результат выглядит следующим образом:

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

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

...

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

.width10 {
  width: 10%; }

.width20 {
  width: 20%; }

...

.width100 {
  width: 100%; }