/!\ attention au dash (-) : élément de nom valide en SASS/CSS → $qty-1 (nom) != $qty - 1 (opération)
@mixin imagegrid($qty, $margin) {
width: ((100% - (($qty - 1) * $margin))/$qty) // the dash is a valide name in SASS : $qty-1 (nom) != $qty - 1 (opération)
&nth-child(n) {
margin-right: $margin;
margin-bottom: $margin;
}
&nth-child(#{$qty}n) { // opérateur #, permet ici d'insérer une variable
margin-right: 0;
margin-bottom: 0;
}
}
.grid {
@include clearfix;
.item {
float:left;
@include imagegrid(5,1%);
}
}
→ très intéressant de voir la démo d'usage en fin de vidéo, avec la mise à jour en temps réel.