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;

}

编译出来代码：

html引入scss,使用Sass混合宏来声明CSS伪类选择器相关推荐

scss与sass介绍
文章目录 CSS : sass scss 与sass scss 与sass的使用 CSS : 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语 ...
sass的继承，混合宏，占位符的用法总结
SCSS中混合宏使用 @mixin mt($var){ margin-top: $var; }.block { @include mt(5px);span { display:block; @incl ...
详解scss的继承、占位符和混合宏
1.继承和占位符两者都是通过@extend来引用. 1.1 继承一个已经存在的css样式类,可以被其他样式类继承. 例如,实现以下css样式: .btn, .btn--primary, .btn- ...
scss怎么引入到html,Sass 导入指令
描述导入指令,导入SASS或SCSS文件. 它直接需要导入文件名. 在SASS中导入的所有文件将在单个CSS文件中组合.当我们使用@import规则时,很少有事情编译到CSS:文件扩展名<.c ...
scss2css vscode设置_VSCode下让CSS文件完美支持SCSS或SASS语法方法
VSCode下让CSS文件完美支持SCSS或SASS语法方法习惯Webpack + PostCSS后, 通常PostCSS都是直接对CSS文件进行处理, 但是大部分习惯SCSS/SASS/LESS的 ...
[vue] 如何引入scss？引入后如何使用？
[vue] 如何引入scss?引入后如何使用? 安装scss依赖包: npm install sass-loader --save-dev npm install node-sass --save-d ...
SCSS和Sass有什么区别？
根据我的阅读,Sass是一种语言,它通过变量和数学支持使CSS更加强大. SCSS有什么区别? 是否应该使用相同的语言? 类似? 不同? #1楼基本区别是语法. 尽管SASS的语法宽松,带有空格,没 ...
less、scss、sass
less.scss.sass scss/sass.less 都是动态样式语言,比css多出很多功能(如变量.嵌套.运算.继承.函数等),更方便阅读和维护预处理语言使用是:开发时用预处理语言,在打包上 ...
[css] 有用过scss和sass吗？说说它们之间的区别是什么？
[css] 有用过scss和sass吗?说说它们之间的区别是什么? sass和scss其实是一样的css预处理语言,其后缀名是分别为 .sass和.scss两种.SASS版本3.0之前的后缀名为.sa ...

html引入scss,使用Sass混合宏来声明CSS伪类选择器

html引入scss,使用Sass混合宏来声明CSS伪类选择器相关推荐

最新文章

热门文章