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

编辑推荐: 掘金是一个高质量的技术社区,从 CSS 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。 点击链接查看最新前端内容,或到各大应用市场搜索「 掘金」下载APP,技术干货尽在掌握中。

CSS3在选择器方面添加伪类选择器这方面的特性,比如:nth-child(n):nth-of-type(n)这样的选择器,其好处在这里就不多说了。如果你对这方面感兴趣的话,你可以阅读早前整理有关于CSS选择器方面的《CSS3 选择器:伪类选择器》一文。

而今天我们要说的是在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;
        }
    }
}

编译出来代码:

来看一个简单的示例:

如果元素中都是同类型的元素,一般使用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;
        }
    }
}

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

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;
        }
    }
}

示例如下:

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;
        }
    }
}

示例如下:

between()

between()表示选择第firstlast之间的元素。这个混合宏不同的是,给其传递三个变量:$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;
        }
    }
}

示例如下:

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;
        }
    }
}

示例如下:

each()

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

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

示例如下:

其它选择器的混合宏

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

CSS中Quantity Queries是将CSS伪类选择器组合在一起使用,使自己的选择器变得强大。如果你从未接触过这方面的知识,建议您阅读这篇文章《CSS中的数量查询》。

总结

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

大漠

常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3:核心技术与案例实战》。

如需转载,烦请注明出处:http://www.w3cplus.com/preprocessor/nth-child-sass-mixins.html

返回顶部