sasset:working_with_math_operations
- multiplication *
- division /
/!\ 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.
sasset/working_with_math_operations.txt · Last modified: 2016/04/02 12:19 by leo