本文主要是介绍SCSS - 嵌套，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
嵌套{{}}
嵌套就像下面的样子，先写自身的样式，再嵌套子元素。
嵌套不要超过三层，否则产生难以理解的代码。
#a {float: right;.nav {float: left;color: red;ul {width: 400px;li {font-size: 30px;a {color: blue;}&.active {font-weight: bold;}}}}
}
注意&符号，它叫父元素占位符，如果没有父元素占位符，解析之后会是：
#a .nav ul li .active {font-weight: bold;
}
#a .nav ul li .active指代什么元素？指代li下面的所有元素中class是active的元素，这根本不是我们的本意，我们的本意是ul下面所有li中class是active的li。所以不能这么写。现在，如果加上&符号，解析之后会是：
#a .nav ul li.active {font-weight: bold;
}
这样就符合要求了。所以，&符号指代父元素，当.active并不是li的子元素，而是li自身的一个css状态时，你应该使用&符号。凡是必须将两个选择符连写在一起的场合，包括ele.class、ele:active等等，都适用&。
当一个元素的样式在另一个容器中有其他指定的样式时，可以使用嵌套选择器让他们保持在同一个地方。.no-opacity &相当于.no-opacity .foo。
.foo {// ….no-opacity & {display: none;}
}
进阶：群组选择器的写法
如果父元素是.container，子元素有h1、h2、h3，他们行高都是1.5em，怎么写？有两种写法：
.container h1, .container h2, .container h3 {line-height: 1.5em;
}
.container {h1, h2, h3 {line-height: 1.5em;}
}
显然第一种重复了N次.container，是一种愚蠢的写法，下面的写法才是科学的。
总之，任何一级选择器都可以写成组合选择器。
进阶：子组合选择器和同层组合选择器： >、 +和~
子组合选择器的意思是，有一个#id>li列表，如果你明确知道不需要给#id设置任何规则，只想给li设置规则，那么，你就没必要写成下面的样子：
#id {li {......}
}
只需要下面这样即可。说白了>并不是SCSS，而是原生css的写法。
#id > li {......
}
同样道理，后邻选择符（E+F）和后邻们选择符（E~F）也可以直接用。不过，SASS还有更灵活的用法：
1、把F写到大括号里面，+和~也放到里面。请记住，不要以为大括号里面的元素一定是子元素，还可能是后邻（们）元素。
2、把F写到大括号里面，但是+和~放到外面。下面的dl >就是把>放到了外面，可以少敲几个>。
3、如果都在大括号外面，那就是常规CSS的写法，不多说。
article {~ article {border-top: 1px dashed #ccc}> section {background: #eee}dl > {dt {color: #333}dd {color: #555}}nav + & {margin-top: 0}
}
进阶：属性名也可以拆开，用大括号嵌套！
这个就有点牛逼了，凡是带中划线的属性名，都可以拆开，然后用大括号嵌套，让你懒到家。
写法是，把border-style的前半部分写在块外，后面加个冒号，然后把后半部分写到大括号里面即可。将来解析的时候，解析器会自动拼装。
注意绝对不可以忘了加冒号，如果忘了加冒号，就成了最简单的嵌套，就全错了。
nav {border: {style: solid;width: 1px;color: #ccc;}
}
更复杂可以这样，外面是一个正常的简写属性和它的值，后面跟个大括号，大括号里面可以声明几个细分属性的后半名称和值：
nav {border: 1px solid #ccc {left: 0px;right: 0px;}
}
解析之后是：
nav {border: 1px solid #ccc;border-left: 0px;border-right: 0px;
}
这篇关于SCSS - 嵌套的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
