SCSS中混合和继承，混合和函数的区别

友情提示：如果对SCSS还不是很清楚的同学，可以参考下SCSS基本使用

混合和继承的区别

//继承
%flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.wrap {
    @extend %flex-center;
}

.container {
    @extend %flex-center;
}

//混合
@mixin flex-center () {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrap {
    @include flex-center();
}

.container {
    @include flex-center();
}

看以上的代码，继承和混合都是为了实现代码复用的功能，不仅如此，两者好像除了%和@mixin两种声明方式以及@extend和@include两种引用方式不同，好像其他真的没看出什么区别，这就懵逼了，为毛SCSS会提供两种功能类似的功能。随着使用的深入，发现其实两者虽然都是为了代码复用，但是使用场景以及编译后的结果还是有很大的不同的。来看下编译后的代码：

//继承
.container, .wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

//混合
.wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

通过以上编译的代码， 其实就知道了混合它不是公用样式类，而是直接复制一份出来，而继承只是对类添加选择器达到共用的目的，所以继承的话是没有代码冗余的，而混合会有代码冗余。
以上提到的都是直接引用样式类，都不涉及变量参数的情况。如果要通过参数功能引入变量，输出多样化的样式的话，那继承就无法实现，只能通过混合来实现，看以下代码：

//渐变
@mixin linear($direction,$color1,$color2){
    background: -webkit-linear-gradient($direction,$color1, $color2); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient($direction,$color1, $color2); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient($direction,$color1, $color2); /* Firefox 3.6 - 15 */
    background: linear-gradient($direction,$color1, $color2); /* 标准的语法 */
}
.wrap {
    width:500px;
    height:500px;
    @include linear(left,red,green);
}

编译后：

.wrap {
    width: 500px;
    height: 500px;
    /* Safari 5.1 - 6.0 */
    background: -webkit-linear-gradient(left, red, green);
    /* Opera 11.1 - 12.0 */
    background: -o-linear-gradient(left, red, green);
    /* Firefox 3.6 - 15 */
    background: -moz-linear-gradient(left, red, green);
    /* 标准的语法 */
    background: linear-gradient(left, red, green);
}

所以我们得出结论：

• 如果你的代码块中涉及到变量，建议使用混合来创建相同的代码块。
• 如果你的代码块不需要专任何变量参数，而且有一个通用类已在文件中存在，那么建议使用 SCSS 的继承。
  #####混合和函数的区别
  混合和函数都是在SCSS中的作用都是通过传参来输出结果的，这两者的区别还是比较明显的，先上代码：

混合

@mixin linear($direction,$color1,$color2){
    background: -webkit-linear-gradient($direction,$color1, $color2); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient($direction,$color1, $color2); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient($direction,$color1, $color2); /* Firefox 3.6 - 15 */
    background: linear-gradient($direction,$color1, $color2); /* 标准的语法 */
}
.wrap {
    width:500px;
    height:500px;
    @include linear(left,red,green);
}

//转换CSS
.wrap {
    width: 500px;
    height: 500px;
    background: -webkit-linear-gradient(left, red, green);
    /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(left, red, green);
    /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(left, red, green);
    /* Firefox 3.6 - 15 */
    background: linear-gradient(left, red, green);
    /* 标准的语法 */
}

函数

//实现px与rem的转化
@function j($px, $base-font-size: 100px) {
    @if (unitless($px)) {
        @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
        @return j($px + 0px); // That may fail.
    }

    @else if (unit($px)==rem) {
        @return $px;
    }

    @return ($px / $base-font-size) * 1rem;
}

.box{
    width:j(200);
    height:j(200);
}

//转换CSS
.box {
    width: 2rem;
    height: 2rem;
}

混合和函数的区别

• 混合主要是通过参数功能引入变量，输出多样化的样式，为了可以现实代码复用。
• 函数的功能是传入参数，经过函数内部的计算判断，然后需要搭配@return输出一个值的。