sass09

scss

/*
1、使用自定义function和@each实现栅格布局。
@function buildLayout($num: 5){
 
}
 
结果：
col1{width: 20%}
col2{width: 40%}
...
*/

@function buildLayout($num: 5){
    $map:(defaultValue:0);
    $rate:percentage(1 / $num);
    @for $i from 1 through $num{
        $tmpMap:(col#{$i}: $rate * $i);
        $map:map-merge($map,$tmpMap);
    }
    $map:map-remove($map,defaultValue);
    @return $map;
}

@mixin buildLayout($num:5){
    $map:buildLayout($num);
    @each $key,$value in $map{
        .#{$key}{
            width:$value;
        }
    }
}
@include buildLayout(10);
@debug buildLayout(10);

css

@charset "UTF-8";
/*
1、使用自定义function和@each实现栅格布局。
@function buildLayout($num: 5){
 
}
 
结果：
col1{width: 20%}
col2{width: 40%}
...
*/
.col1 {
  width: 10%;
}

.col2 {
  width: 20%;
}

.col3 {
  width: 30%;
}

.col4 {
  width: 40%;
}

.col5 {
  width: 50%;
}

.col6 {
  width: 60%;
}

.col7 {
  width: 70%;
}

.col8 {
  width: 80%;
}

.col9 {
  width: 90%;
}

.col10 {
  width: 100%;
}

/*# sourceMappingURL=demo1.css.map */