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

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

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

编译出来代码:

剩余80%内容付费后可查看

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

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

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