我们说到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文件中。

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c59285.shtml