sass - 选择器用法总结

前端写样式使用预处理语言开发，是最有效的和方便维护 

 @mixin 混合

 @extend 扩展

mixin 可以声明函数 并且会返回新的样式组合，相当于样式组合工具 
可以声明多个重名的 mixin函数，参数可以不同，并且在调用的时候，会根据传入的参数个数匹配调用最合适的 mixin函数 
mixin 中可以使用 @if 关键字按照条件返回合适的样式 
mixin 语句可以声明函数或者变量，声明函数时，可以使用when关键字 

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}

@mixin border($ps, $color){
    @if $ps == 'top' {
        border-bottom: 2px solid $color;
    }
    @if $ps == 'right' {
        border-left: 2px solid $color;
    }
    @if $ps == 'left' {
        border-right: 2px solid $color;
    }
    @if $ps == 'bottom' {
        border-top: 2px solid $color;
    }
}

　　

mixin 可以是已有的样式，使用方式可以加()或者不加 
可以给 mixin 加 !important 相当于是作用在普通样式上 

@include

include 相当于函数的调用，或者是变量的引用，可以使用已有样式，或者使用mixin声明的样式函数返回的样式，样式只在当前作用域生效，且不影响其他样式产出结果。 

@mixin tab-active($ps) {
    color: $activeColor;
    @include border($ps, $bottomlineColor);
}

 

@extend

有作用域，在 @media中使用，只会作用于当前 media，使用当前media内的样式 
extend 相当于给当前样式的子样式 
通常用在 & 父选择器，样式，id选择器的后面，作用是扩展子类样式 

@mixin 和 @include区别

两者都是处理样式，@mixin可以被当做产出样式的函数，可以接受传参； @include 是函数的调用，可以在任何位置调用。