html引入scss,使用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;

}

}

}

编译出来代码：