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

混入

@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;
}

 

继承和混入的区别

继承和混入都能将一段样式代码引入到另一段代码中, 但是@mixin会将这段代码复制到所有@include处, 而@extend过来的代码, 会将所有@extend的类集合起来写, 虽然效果一样, 但是用@extend得到的目标代码更少, 更精简.

主要来说两者用法不一样

混入的话意图在于样式代码的复用
继承的话意图在于在一个选择器中使用另一个选择器的样式

以上就是陪玩系统源码，继承和混入的区别， 更多内容欢迎关注之后的文章