使用 Sass 混合宏来声明 CSS 伪类选择器

Question

CSS3在选择器方面添加伪类选择器这方面的特性，比如 :nth-child(n)、:nth-of-type(n) 这样的选择器，其好处在这里就不多说了。

而今天我们要说的是在 Sass 中如何更灵巧的使用 CSS3 的一些伪类选择器。

为什么使用混合宏来定义伪类选择器

CSS3中伪类选择器怎么使用，我想不是什么大问题，但大家在使用伪类选择器时，或多或少感觉到了其不太方便与灵巧。不过不要急，现在借助CSS预处理器方面的一些特性，可以让我们使用CSS伪类选择器变得更为灵巧和方便。而且把有关于CSS选择器相关的混合宏都放在了 SassMagic 中的 _selector.scss 文件中。

接下来看看Sass是如何给伪类选择器声明混合宏。

定义伪类选择器的混合宏

在这篇文章中详细介绍了如何使用Sass的Mixins给:first-child（:first-of-type）、:last-child(:last-of-type)等选择器。

first()

给first()提供两个参数$num和$type，其中$num传递的值是一些数值(大于0的正整数),而$type是一个布尔值，具有两个值，如果true表示的是:first-of-type或者:nth-of-type()；如果传递的值是false表示的是:first-child或者:nth-child()。

first()表示的是从元素的前面开始向后计算，找到匹配的元素。这里特别提示一下，如果$num值为1表示的是选中的元素的第一个元素，比如:first-child和:first-of-type对应选择到的元素。

别的不多说，先来看看怎么声明：

@mixin first($num, $type: false) {
    @if ($num ==1) and ($type == true) {
        &:first-of-type{
            @content;
        }
    }
    @if ($num == 1) and ($type == false) {
        &:first-child{
            @content;
        }
    }
    @if ($num !=1) and ($type == true) {
        &:nth-of-type(-n + #{$num}){
            @content;
        }
    }
    @if ($num != 1) and ($type == false) {
        &:nth-child(-n + #{$num}){
            @content;
        }
    }
}

编译出来代码：

li:nth-child(-n + 4) {
  background: red;
}

li:first-child {
  background: red;
}

来看一个简单的示例：

如果元素中都是同类型的元素，一般使用first($num,$type:false)；而如果元素不是同类型的元素，使用first($num,$type:true)。

last()

last()和first()非常的类似，只不过last()对应的是:last-child（:last-of-type）和:nth-last-child()（:nth-last-of-type()）。同样的其传递的参数和first()一样，$num和$type。这两个参数的具体说明请查阅first()相关介绍。

@mixin last($num, $type: false) {
    @if ($num ==1) and ($type == true) {
        &:last-of-type{
            @content;
        }
    }
    @if ($num == 1) and ($type == false) {
        &:last-child{
            @content;
        }
    }
    @if ($num !=1) and ($type == true) {
        &:nth-last-of-type(-n + #{$num}){
            @content;
        }
    }
    @if ($num != 1) and ($type == false) {
        &:nth-last-child(-n + #{$num}){
            @content;
        }
    }
}

li:nth-last-child(-n + 4) {
  background: red;
}

li:last-child {
  background: red;
}

将上面的示例做一下简单的调整：

after()

after()和first()以及last()都不一样。平时我们都会碰到选择第x个后面的元素。那么我们就可以为这种选择器声明一个混合宏，比如说after()。同样的，给这个混合宏传递两个参数$num和$type。其分别对应的是nth-child(n+a)和nth-of-type(n+a)这样的选择器。

@mixin after($num, $type: false) {
    @if $type == true {
        &:nth-of-type(n+#{$num + 1}){
            @content;
        }
    }
    @else {
        &:nth-child(n + #{$num + 1}){
            @content;
        }
    }
}

li:nth-child(n + 5) {
  background: red;
}

li:nth-of-type(n+4) {
  background: red;
}

示例如下：

from-end()

from-end()表示选择倒数第x个元素。同样其传递两个参数$num和$type。对应的是:nth-last-child(n)和:nth-last-of-type(n)选择器。

@mixin from-end($num, $type: false) {
    @if $type == true {
        &:nth-last-of-type(#{$num}){
            @content;
        }
    }
    @else {
        &:nth-last-child(#{$num}){
            @content;
        }
    }
}

li:nth-last-child(4) {
  background: red;
}

li:nth-last-of-type(3) {
  background: red;
}

示例如下：

between()

between()表示选择第first和last之间的元素。这个混合宏不同的是，给其传递三个变量：$first、$last和$type。其中$first和$last是正整数值，$type同样的一个布尔值。其对应的选择器是:nth-child(n+a):nth-child(-n+b)或者:nth-of-type(n+a):nth-of-type(-n+b)。

@mixin between($first,$last, $type: false) {
    @if $type == true {
        &:nth-of-type(n + #{$first}):nth-of-type(-n + #{$last}){
            @content;
        }
    }
    @else {
        &:nth-child(n + #{$first}):nth-child(-n + #{$last}){
            @content;
        }
    }
}

li:nth-child(n + 2):nth-child(-n + 5) {
  background: red;
}

li:nth-of-type(n + 2):nth-of-type(-n + 5) {
  background: red;
}

示例如下：

all-but()

all-but()表示除第x之外所有元素。其传递的参数同样是$num和$type。对应的选择器是:not(:nth-child(n))和:not(:nth-of-type(n))选择器。

@mixin all-but($num, $type: false) {
    @if $type == true {
        &:not(:nth-of-type(#{$num})){
            @content;
        }
    }
    @else {
        &:not(:nth-child(#{$num})){
            @content;
        }
    }
}

li:not(:nth-child(2)) {
  background: red;
}

li:not(:nth-of-type(2)) {
  background: red;
}

示例如下：

each()

each()表示的是隔几选一，有点类似于JavaScript中的便利，简单点讲就是选择第an个元素。也给他传两个参数$num和$type。对应的选择器是:nth-child(an)和:nth-of-type(an)。比如$num的值是3时，选择到的元素是对应的第3、6、9、...、3n个元素。

@mixin each($num, $type: false) {
    @if $type == true {
        &:nth-of-type(#{$num}n){
            @content;
        }
    }
    @else {
        &:nth-child(#{$num}n){
            @content;
        }
    }
}

li:nth-child(2n) {
  background: red;
}

li:nth-of-type(2n) {
  background: red;
}

示例如下：

其它选择器的混合宏

通过上面的几个示例，大家可以根据自己平时的需要，设计属于自己的选择器混合宏。在SassMagic的_selector.scss文件中还提供了其他的选择器混合宏。比如context()、parentState()、parent-hover()等。这些都还是一些简单的，而当中还有最实用的就是通过Sass写的Quantity Queries混合宏。

CSS 中 Quantity Queries 是将 CSS 伪类选择器组合在一起使用，使自己的选择器变得强大。

总结

这篇文章主要通过使用Sass这样的CSS预处理器语言对CSS伪类选择器进行改造，通过简单的描述语言实现一些组合的伪类选择器特性，从而让自己的选择器变得灵巧好用。在这个基础上，可以按同样的方式对自己常使用的选择器进行改造，提高自己的生产效率。如果文章有何不对，或者你有更好的建议欢迎在下面的评论中与我们一起分享，或者直接在 SassMagic 中提 Issue。