Function in Sass ?

Sass helper generator

Hi,

I've made this function in Sass :


$list-margin: mt, mr, mb, ml, m;
$list-margin-values: 0, 1, 2;

@each $margin-type in $list-margin {
   @each $margin in $list-margin-values {
      //$temp_m : str-slice($margin-type, 0, 1);
      $temp_t : str-slice($margin-type, 2, 3);
      
      $property: margin;
      
      @if $temp_t == t {
         $property: margin-top;
      } @else if $temp_t == r {
         $property: margin-right;
      } @else if $temp_t == b {
         $property: margin-bottom;
      } @else if $temp_t == l {
         $property: margin-left;
      }
      
      
      $value : $margin + 0em;
      @if $margin == 0 {
         $value : $margin;
      } 
      
      .#{$margin-type}#{$margin} { #{$property}: #{$value}; }


      }
   }
   
Objective : generate these classes :

.mt0 { margin-top: 0; }
.mt1 { margin-top: 1em; }
.mt2 { margin-top: 2em; }
.mr0 { margin-right: 0; }
.mr1 { margin-right: 1em; }
.mr2 { margin-right: 2em; }
.mb0 { margin-bottom: 0; }
.mb1 { margin-bottom: 1em; }
.mb2 { margin-bottom: 2em; }
.ml0 { margin-left: 0; }
.ml1 { margin-left: 1em; }
.ml2 { margin-left: 2em; }
.m0  { margin: 0; }
.m1  { margin: 1em; }
.m2  { margin: 2em; }

However, I would like to generate :
.ml1-5 { margin-left: 1.5em; }

How could I do ?

Si l’objectif est la liste de classe en bas, pourquoi ne pas simplement faire une boucle :

@for $i from 0 through 3 {

  .ma#{$i} { margin: #{$i}em; }

  .mt#{$i} { margin-top: #{$i}em; }

  .mr#{$i} { margin-right: #{$i}em; }

  .mb#{$i} { margin-bottom: #{$i}em; }

  .ml#{$i} { margin-left: #{$i}em; }

}

(le 3 peut évidemment devenir une variable). Je me doute que ça n’est pas aussi simple, mais quel est l’obstacle supplémentaire ?

str-replace for you boys: http://sassmeister.com/gist/8300738.