12.27

### 
日期：12.27
    混合器
        @mixin 标识符定义
            @mixin dome{
                color:red;
            }
        @include 关键字来调用
            div{
                @include dome
            }
        混合器中的CSS规则 可以嵌套普通的css样式
        混合器传参                            
            @mixin name($noraml,$hover){
                color:$noraml;
                &:hovre{
                    color:$hover;
                }
            }
            a{
                @include name(red,gerrn);
            }
        默认参数值
            key:value
            @mixin name($noraml,$hover:$noraml){
                color:$noraml;
                &:hovre{
                    color:$hover;
                }
            }
    选择器继承 一定一个选择器继承另一个选择器的样式
    把共有的属性抽离出来放入到一个选择器中，然后让其余
    的有需要这个样式的选择器去继承这个共有的选择器
    跟混合器相比，继承生成的css代码相对更多少
    不要用后代选择器去继承
        @extend 类名
        @extend 元素
        .error{
            color:red;
        }
        .nev{
            @extend .error;
            border:1px solid green;
        }
    运算
        数据类型: 数字:1 2 5 7 9
                 字符串:"foo"、baz
                 颜色:blue、#77777、rgba(255,0,0,0.5)
                 布尔值:true、false
                 空值：null
                 数组(list)用空格或逗号作为分隔符 1.5em 1em 0 2em
                 maps:相当于jasaScript的object (key1:value1,key2:value2)
        关系运算符< > <= >=
        以下三种 / 被视为除法运算
            在变量中使用
            ()
            在算术表达式中
        不想让 / 作为除法 可以用#{}插值语句包裹在变量中
        颜色运算
        字符串运算
            + 可用于连接操作符
        圆括号改变运算顺序 1em + (2 * 3) = 7em
        内置函数
            p {
              color: hsl(0, 100%, 50%);
            }
        插值语句 #{} 可以在选择器或者属性名中使用变量
        定制按钮
        定制按钮
            @mixin border($color,$radius,$style,$buer){
                @if($buer){
                    border-color: $color;
                    border-radius: $radius;
                    border-style: $style;
                }@else{
                    border: none;
                }
            }
            
        使用按钮
            .btn-defor{
                @include border(pink,25px,solid,true);
            }