使用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()
表示选择第first
和last
之间的元素。这个混合宏不同的是,给其传递三个变量:$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
时,选择到的元素是对应的第3
、6
、9
、...、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感兴趣,欢迎参与共建,或者给我们点赞。(^_^)。