User Tools

Site Tools


sasset:working_with_math_operations

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

sasset:working_with_math_operations [2016/04/02 12:19] (current)
leo created
Line 1: Line 1:
 +|<- [[Using comments and hidden comments]]|[[Modifying colors]] ->|
  
 +  * multiplication *
 +  * division /
 +  * 
 +
 +/!\ attention au dash (-) : élément de nom valide en SASS/CSS -> $qty-1 (nom) != $qty - 1 (opération)
 +
 +<​code>​
 +@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%);​
 +  }
 +}
 +</​code>​
 +
 +-> 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