Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Function in Sass ?
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 ?
@ffoodd

This comment has been minimized.

Copy link

ffoodd commented Jan 7, 2014

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 ?

@HugoGiraudel

This comment has been minimized.

Copy link

HugoGiraudel commented Jan 7, 2014

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.