陪玩系统源码，继承和混入的区别

混入

@mixin block {
    .a {
        width: 96%;
        margin-left: 2%;
        border-radius: 10px;
        border: 1px solid #333;
    }
}

.container {
    @include block;
}

转化为:

.container .a {
  width: 96%;
  margin-left: 2%;
  border-radius: 10px;
  border: 1px solid #333;
}

// 参数可以指定默认值
@mixin block-padding($top: 0, $right: 0, $bottom: 0, $left: 0) {
    padding-top: $top;
    padding-right: $right;
    padding-bottom: $bottom;
    padding-left: $left;
}

.container {
    // 可以按顺序传参
    // @include block-padding(10px, 20px, 30px, 40px);
    // 也可以指定参数名传参
    @include block-padding($left: 40px, $right: 20px, $top: 10px, $bottom: 30px);
}

转化为:

.container {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

@mixin linear-gradient($direction, $gradients...) {
    background-color: nth($list: $gradients, $n: 1); // 获取一个$list的$n位(不是从0开始)
    background-image: linear-gradient($direction, $gradients);
}

.container {
    @include linear-gradient(to top, #f00, #0f0, #00f);
}

转化为:

.container {
  background-color: #f00;
  background-image: -webkit-gradient(linear, left bottom, left top, from(#f00), color-stop(#0f0), to(#00f));
  background-image: linear-gradient(to top, #f00, #0f0, #00f);
}

继承

.alert {
    width: 100%;
}

.alert-info {
    @extend .alert;
    background-color: #f2f2f2;
}

.alert-success {
    @extend .alert;
    background-color: green;
}

转化成:

// 如果不想成成.alert类的样式, 只是用于集成的话, 可以在scss中将.alert换成%alert占位符
.alert, .alert-success, .alert-info {
  width: 100%;
}

.alert-info {
  background-color: #f2f2f2;
}

.alert-success {
  background-color: green;
}