web-dev-qa-db-fra.com

SCSS / SASS: comment générer dynamiquement une liste de classes avec des virgules les séparant

Je travaille avec la syntaxe SCSS de SASS pour créer un système de grille dynamique mais j'ai rencontré un problème.

J'essaie de rendre le système de grille complètement dynamique comme ceci:

$columns: 12;

puis je crée les colonnes comme ceci:

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

Quelles sorties:

.col-1 {
    width: 4.16667%;
  }

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

Cela fonctionne bien mais ce que je veux faire ensuite, c'est générer dynamiquement une longue liste de classes de colonnes séparées par des virgules en fonction du nombre de colonnes $ choisies - par exemple, je veux que cela ressemble à ceci:

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

J'ai fatigué ça:

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

mais la sortie est la suivante:

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

Je suis un peu coincé sur la logique ici ainsi que sur la syntaxe SCSS requise pour créer quelque chose comme ça.

Quelqu'un a-t-il une idée?

Merci

csssassstylesstylesheetgrid-system
54
Josh

Je pense que vous voudrez peut-être jeter un œil à @extend. Si vous configurez quelque chose comme:

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

Il doit s'afficher dans votre fichier css comme suit:

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

@ étendre dans les documents .

J'espère que cela t'aides!

91
D.Alexander

Il y a aussi un moyen de faire ce que votre question demande spécifiquement: générer (et utiliser) une liste de classes avec des virgules les séparant. Réponse de D.Alexander fonctionne totalement dans votre situation, mais je poste cette alternative au cas où il y aurait un autre cas d'utilisation pour quelqu'un qui regarde cette question.

Voici un stylo démontrant: http://codepen.io/davidtheclark/pen/cvrxq

Fondamentalement, vous pouvez utiliser fonctions Sass pour obtenir ce que vous voulez. Plus précisément, j'utilise append pour ajouter des classes à ma liste, séparées par des virgules, et unquote pour éviter les conflits de compilation avec le point dans les noms de classe.

Donc, mon mixin finit par ressembler à ceci:

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

J'espère que cela aide quelqu'un.

13
davidtheclark

grâce à @davidtheclark voici une version plus générique:

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

Utilisez-le comme ceci:

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

Le résultat ressemble à ceci:

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

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

...

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

.width10 {
  width: 10%; }

.width20 {
  width: 20%; }

...

.width100 {
  width: 100%; }
5
b3wii