SCSS/ SASS: comment générer dynamiquement une liste de classes avec des virgules qui les séparent
je travaille avec la syntaxe SCSS de SASS pour créer un système de grille dynamique mais j'ai un problème.
j'essaie de rendre le système de grille complètement dynamique comme ceci:
$columns: 12;
puis-je créer les colonnes comme ceci:
@mixin col-x {
@for $i from 1 through $columns {
.col-#{$i} { width: $column-size * $i; }
}
}
les résultats:
.col-1 {
width: 4.16667%;
}
.col-2 {
width: 8.33333%;
}
etc...
Cela fonctionne bien, mais ce que je veux faire ensuite est de générer dynamiquement une longue liste de classes de colonnes séparées par des virgules basées sur le nombre de $columns choisi - e.g Je veux qu'elle ressemble à ceci:
.col-1,
.col-2,
.col-3,
.col-4,
etc... {
float: left;
}
j'ai fatigué ceci:
@mixin col-x-list {
@for $i from 1 through $columns - 1 {
.col-#{$i}-m { float: left; }
}
}
mais la sortie est ceci:
.col-1 {
float: left;
}
.col-2 {
float: left;
}
etc...
je suis un peu coincé sur la logique ici aussi bien que sur la syntaxe SCSS nécessaire pour créer quelque chose comme ça.
quelqu'un a une idée?
Merci
3 réponses
je pense que vous voudrez peut-être prendre un coup d'oeil à @extend. Si vous le configurer 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 devrait s'afficher dans votre fichier css comme:
.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;
}
Espérons que cette aide!
il y a aussi une façon de faire ce que votre question demande spécifiquement: générer (et utiliser) une liste de classes avec des virgules qui les séparent. la réponse de D. Alexander fonctionne parfaitement 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
en gros, vous pouvez utiliser fonctions Sass pour atteindre 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 la période 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 l'aide à quelqu'un.
thnx to @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
}
}
l'Utiliser 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%; }