selectors - SCSS/SASS: cómo generar dinámicamente una lista de clases con comas que las separan

scss file

Question

Estoy trabajando con la sintaxis SCSS de SASS para crear un sistema de grilla dinámico, pero me he topado con un inconveniente.

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

$columns: 12;

luego creo las columnas como esta:

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

Qué salidas:

.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 columna separadas por comas en función del número de $ columnas elegidas ; por ejemplo, quiero que se vea así:

.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 el resultado es este:

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

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

¿Alguien tiene alguna idea?

Gracias

Answer 1

Creo que es posible que desee echar un vistazo a @extend . Si configura eso, algo así 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 mostrar 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;
}

@extend en los documentos .

¡Espero que esto ayude!

Answer 2

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

Úselo así:

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

El resultado es 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%; }

Answer 3

También hay una manera de hacer lo que tu pregunta está pidiendo específicamente: generar (y usar) una lista de clases con comas que las separen. La respuesta de D. Alexander funciona en tu situación, pero estoy publicando esta alternativa en caso de que exista otro caso de uso para alguien que esté viendo esta pregunta.

Aquí hay una demostración de Pen: http://codepen.io/davidtheclark/pen/cvrxq

Básicamente, puedes usar las funciones de Sass para lograr lo que quieres. 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 las clases.

Así que mi mixin termina luciendo 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 ayude a alguien.