scss的混入和继承，以及for,each循环

码云代码仓：https://gitee.com/songjinyang/scss
index.scss

$color-red:red;
$color-blue:blue;
@mixin flex($direction,$jus-con:'',$ali-itm:'') {
    display: flex;
    @if $direction=='column' {
        flex-direction: column;
    }@else {
        flex-direction: 'xxx';
    }
    justify-content: $jus-con;
    align-items: $ali-itm;
}
.ext{
    color: green;
}
h1.ext {
    font-size: 22px;
}
.father {
    color: $color-red;
    .sonOne {
        @import "./imp.scss";

        background-color: $color-blue;
        .one1 {
            color: $color-blue;
            @extend .ext; 
        }
    }
    .sonTwo {
        // @include flex('row','flex-end','center');
        @include flex($direction:'',$jus-con:center,$ali-itm:center);
        background-color: $color-blue;
        @extend .ext;
    }
    
}
// 插值语句
$border:border;
.#{$border} {
    #{border}:1px solid yellow;
}
// for
@for $i from 1 through 3 {
    .item#{$i} {
        width: 1px*#{$i};
    }
}
// each
@each $item in a,b,c,d,e {
    .test#{$item} {
        color: red;
    }
}
@each $item,$color in (color,red),('width','2px'),('height','3px') {
    .cc {
        #{$item}:#{$color};
    }
}

imp.scss

$color-blue:yellow;

最后编译css为

.ext, .father .sonOne .one1, .father .sonTwo {
  color: green;
}

h1.ext, .father .sonOne h1.one1, .father h1.sonTwo {
  font-size: 22px;
}

.father {
  color: red;
}

.father .sonOne {
  background-color: yellow;
}

.father .sonOne .one1 {
  color: yellow;
}

.father .sonTwo {
  display: flex;
  flex-direction: 'xxx';
  justify-content: center;
  align-items: center;
  background-color: blue;
}

.border {
  border: 1px solid yellow;
}

.item1 {
  width: 1px*1;
}

.item2 {
  width: 1px*2;
}

.item3 {
  width: 1px*3;
}

.testa {
  color: red;
}

.testb {
  color: red;
}

.testc {
  color: red;
}

.testd {
  color: red;
}

.teste {
  color: red;
}

.cc {
  color: red;
}

.cc {
  width: 2px;
}

.cc {
  height: 3px;
}
/*# sourceMappingURL=index.min.css.map */