标签：family 相同 html idt 嵌套 value space 一个 dex
Sass为我们提供了一种方便的操作方式：嵌套。在Sass中，共有3种嵌套方式：
（1）选择器嵌套；
例如：
$color1:red;
$color2:green; $color3:blue; body { color:$color1; .column { color:$color2; .content-title { color:$color3; } } } body
{ color: red; } body .column { color: green; } body .column .content-title { color: blue; }弊端：
选择器嵌套这种方式虽然操作起来很方便，但是却有一个很大的弊端：嵌套的层级越深，编译出来的CSS代码的选择器层级也越深。这种嵌套方式会导致CSS样式冗余，并且难以维护。尽量少用选择器嵌套的方式来书写Sass
（2）属性嵌套；相同的前缀可以拿出来。
例如：
{
width:100px;
height:100px; font: { family:Arial; size:14px; weight:bold; } }div
{ width: 100px; height: 100px; font-family: Arial; font-size: 14px; font-weight: bold; }（3）伪类嵌套或伪元素嵌套；
在Sass中，还有一种嵌套方式：伪类嵌套或伪元素嵌套。伪类嵌套（或伪元素嵌套）跟属性嵌套很像，只不过它是需要借助“&”符号一起配合使用。
常见的伪元素只有4个，即::before、::after、::first-letter、::first-line
举例：伪类嵌套：
$color1:red;
$color2:green; a{ color:$color1; &:hover { color:$color2; } }a
{ color: red; } a:hover { color: green; } .clearfix {
*zoom:1; &:after { clear:both; content:""; display:block; height:0; visibility:hidden; } } .clearfix{*zoom:1;}
.clearfix::after { clear:both; content:""; display:block; height:0; visibility:hidden; }标签：family 相同 html idt 嵌套 value space 一个 dex
原文地址：https://www.cnblogs.com/hou-yuan-zhen/p/11615373.html
