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

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;
        }
    }
}
剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

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

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部