前端开发者学堂 - fedev.cn

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

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

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感兴趣,欢迎参与共建,或者给我们点赞。(^_^)。