28112 sujets

CSS et mise en forme, CSS3

[Résolu] Sass @each

Salut tous !

Je cherche à automatiser un processus via Sass avec une boucle @each, j'ai beaucoup cherché et l'exemple le plus ctié est celui ci: https://codepen.io/mirisuzanne/pen/aBVNyr
Cependant j'ai vraiment énormément de mal à comprendre le fonctionnement de la boucle.
Quelqu'un pourrait il m'éclairer de ses lumières svp ? Smiley smile

Mon HTML :

<div class="link">
    <a class="is-link">A link</a><br>
    <a href="#ldkfldkdfdff" class="is-hover">A hovered link</a><br>
    <a href="#ldkfldkf" class="is-focus">A focused link</a><br>
    <a href="#fdhtrhrthtr" class="is-visited">A visited link</a><br>
    <a href="#ldkfldkfdfsgrehth" class="is-disabled">A disabled link</a><br>
  </div>


Mon SCSS :

.link {
	display: grid;

		@each $grid-column in is-link, is-hover, is-focus, is-visited, is-disabled {
			.#{$grid-column} {
				grid-column: $grid-column / span 2;
				grid-row: 1;
			}
		}
}


Version CSS j'obtiens (pour la class .is-visited par exemple):

.link .is-visited {
    grid-column: is-visited/span 2;
    grid-row: 1;
}


Alors que je voudrais obtenir ça:

.link .is-visited {
    grid-column: 1/span 2;
    grid-row: 1;
}
Modérateur
Guutak a écrit :


Mon SCSS :

.link {
	display: grid;

		@each $grid-column in is-link, is-hover, is-focus, is-visited, is-disabled {
			.#{$grid-column} {
				grid-column: $grid-column / span 2;
				grid-row: 1;
			}
		}
}



Puisque tu utilises une list au lieu d'une map.... 

.link {
	display: grid;

		@each $grid-column in is-link, is-hover, is-focus, is-visited, is-disabled {
			.#{$grid-column} {
				@if $grid-column == is-visited {
					grid-column: 1 / span 2;
				}	
				grid-row: 1;
			}
		}
}

Modifié par niuxe (08 Aug 2017 - 00:18)
Ah j'ai dû mal m'exprimé...
En gros je voudrais une incrémentation de grid column, que ça me donne ça :


a.is-link{
	grid-column: 1 / span 2;
	grid-row: 1;
}

a.is-hover {
	grid-column: 2 / span 2;
	grid-row: 1;
   }

a.is-focus {
	grid-column: 3 / span 2;
	grid-row: 1;
}

a.is-visited {
	grid-column: 4 / span 2;
	grid-row: 1;
}

a.is-disabled {
	grid-column: 5 / span 2;
	grid-row: 1;
}
Modérateur
Alors ça doit être un truc comme : 


.link {
	display: grid;
        $count : 1;
		@each $grid-column in is-link, is-hover, is-focus, is-visited, is-disabled {
			.#{$grid-column} {
					grid-column: #{$count} / span 2;
				grid-row: 1;
			}

            $count : $count + 1;
		}
}


* code fait de tête. Je peux m'être trompé
Administrateur
Guutak a écrit :
J'ai trouvé la solution, c'est cool ! Smiley smile

Et tu veux bien la partager ? Ce serait encore plus cool Smiley smile
Sujet clos
Aller à