使用 Sass 混合宏来声明 CSS 伪类选择器 - 文章教程

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

发布于 2021-09-01 字数 9999 浏览 961 评论 0

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

来看一个简单的示例:

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

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

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

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

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

示例如下:

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

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

示例如下:

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

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;
        }
    }
}
li:nth-child(n + 2):nth-child(-n + 5) {
  background: red;
}

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

示例如下:

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

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

示例如下:

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

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;
        }
    }
}
li:nth-child(2n) {
  background: red;
}

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

示例如下:

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

其它选择器的混合宏

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

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

总结

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!