翻了一圈居然没有一个人把网址转化成文字好让大家复制的，都在截视频？？？？？

我来：https://www.rubydoc.info/gems/sass/Sass/Script/Functions

@mixin functionName {}

变量操作：

    1.直接操作变量，即变量表达式。

    2.通过函数。

• 跟代码块无关的函数，多是自己内置函数称functions

• 可重用的代码块。称mixin

1. 通过复制拷贝的方式使用，通过@include方式调用

2. 使用时以组合声明方式存在，以@extend方式调用

——————————————————

H:60黄|120绿|180青|240蓝|300洋红|360红

S(saturation)饱和度

L(lightness)亮度

——————————————————

@mixin通过@include引入

@mixin col-6{
    width:50%;
    float:left;
}

.webdemo-sec{
    @include col-6();//@mixin通过@include引入
    &:hover{
        background-color:#f5f5f5;//
    }
}

带参数mixin

@mixin col ($width: 50%){//默认是50%
    width:$width
}

.webdemo-sec{
    @include col(50%);//引入时传递参数
    &:hover{
        background-color:#f5f5f5;//
    }
}

继承@extend

.error{
  color:#f00;
}
.serious-error{
  @extend .error;//.serious-error插入到.error里
  border: 1px #f00;
}

• extend
  

extend

extend知识点：

scss通过内部定义hsl函数生成的css将会将csss3的hsl替换成color

mixin的调用方式

通过函数：

变量操作：

变量的重用：变量表达式和函数；

函数又分为funciton(多是内置的函数)和mixin。

可重用的代码块，称为mixin。@include和@extend调用方式

@extend继承多个选择器，也可连续继承。自己试验

extend不可继承选择器序列，如@extend A B; A B{} 后代选择器

使用%，用来构建只用来继承的选择器。

.error {

    color: #f00;

}

.serious-error {

    @extend .error;

    border: 1px solid red;

}

%right {

    color: #f00;

}

.serious-right {

    @extend %right;

    border: 1px solid red;

}