SCSS的扩展功能有哪些

本文小编为大家详细介绍“SCSS的扩展功能有哪些”，内容详细，步骤清晰，细节处理妥当，希望这篇“SCSS的扩展功能有哪些”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

1.嵌套规则

我们CSS是不能嵌套的，但是SCSS允许实现嵌套的，内层的样式将他外层的选择器作为父选择器。也就是说：

.parent{

color:red;

.children{

line-height: 40px;

}

}

代表的CSS代码就是：

.parent{

color:red;

}

.parent .children{

line-height: 40px;

}

可以看出通过嵌套功能我们能让我们的代码结果更加清晰，CSS结构更加容易管理，且避免了重复输入父选择器。

2.父选择器&

在我们使用嵌套规则的时候，我们使用是很方便的，但是遇到要选择父选择器的时候，应该怎么办？比如当给某个元素设置hover样式的时候。

也就是说使用如下：

.parent{

color:red;

&:hover .children{

background: pink;

}

}

代表的CSS代码，就是如下的形式：

.parent{

color:red;

}

.parent:hover .children{

background: pink;

}

转化后的 CSS 文件中&将被替换成嵌套外层的父选择器。但是如果含有多层嵌套，那么最外层的父选择器会一层一层向下传递：

3.属性嵌套

我们经常见到很多的属性有相同的前缀，比如文本属性，font-family, font-size, font-weight都以font作为属性的前缀，为了方便我们使用，SASS允许将属性嵌套在命名空间中。

例如：

.example{

font: {

family: “微软雅黑”;

size: 30px;

weight: bold;

}

}

代表的CSS代码就是：

.example{

font-family: “微软雅黑”;

font-size: 30px;

font-weight: bold;

}

4.占位符选择器%foo

大家对于占位符选择器一定很陌生，但是大家一定听过id选择器，说类选择器，他们的写法分别是# 或者. ，那么其实占位符选择器也就是一个符号而已，%代表的就是我们占位符选择器，但是他必须通过@extend指令调用。

但是具体的用法大家现在可以不用管，我们后期会更加详细给大家讲解，现在大家只用记住当占位符选择器单独使用的时候，是不会编译到CSS文件中。

读到这里，这篇“SCSS的扩展功能有哪些”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网VUE频道。