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 是函数的调用，能够在任何位置调用。