SCSS/ SASS: Cómo generar dinámicamente una lista de clases con comas separándolas

Estoy trabajando con la sintaxis SCSS de SASS para crear un sistema de cuadrícula dinámica, pero he encontrado un inconveniente.

Estoy tratando de hacer que el sistema de cuadrícula sea completamente dinámico de esta manera: 

$columns: 12;

Entonces creo las columnas así: 

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

Que produce: 

.col-1 {
    width: 4.16667%;
  }

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

Esto funciona bien, pero lo que quiero hacer a continuación es generar dinámicamente una larga lista de clases de columnas separadas por comas en función del número de columns columnas elegidas - por ejemplo, quiero que se vea como esto: 

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

He cansado esto: 

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

Pero la salida es la siguiente: 

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

Estoy un poco atascado en la lógica aquí, así como la sintaxis SCSS necesaria para crear algo como esto.

¿alguien tiene alguna idea?

Gracias

Author: Damjan Pavlica, 2013-09-30
Source

3 answers

Creo que es posible que desee echar un vistazo a @extend. Si configura eso algo como:

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

Debería renderizarse en su archivo css como: 

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

@extender en los documentos .

Espero que esto ayude!

 72
Author: D.Alexander,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-24 01:41:38

También hay una manera de hacer lo que tu pregunta pide específicamente: genera (y usa) una lista de clases con comas que las separan. La respuesta de D. Alexander funciona totalmente en su situación, pero estoy publicando esta alternativa en caso de que haya otro caso de uso para alguien que esté mirando esta pregunta.

Aquí hay una pluma demostrando: http://codepen.io/davidtheclark/pen/cvrxq

Básicamente, puede usar funciones Sass para lograr lo que desea. Específicamente, estoy usando append para agregar clases a mi lista, separadas por comas, y unquote para evitar conflictos de compilación con el punto en los nombres de clase.

Así que mi mixin termina pareciéndose así: 

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

Espero que eso ayude a alguien.

 12
Author: davidtheclark,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-03 14:15:43

Thnx to @ davidtheclark aquí hay una versión más genérica: 

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

Úsalo así: 

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

El resultado se ve así: 

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

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

...

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

.width10 {
  width: 10%; }

.width20 {
  width: 20%; }

...

.width100 {
  width: 100%; }
 2
Author: b3wii,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-06 10:31:04