标签：Scss 编译 伪类 color 嵌套 font 选择器
Sass为我们提供了一种方便的操作方式：嵌套。在Sass中，共有3种嵌套方式：
（1）选择器嵌套；
例如：
$color1:red;
$color2:green;
$color3:blue;
body
{
color:$color1;
.column
{
color:$color2;
.content-title
{
color:$color3;
}
}
}
编译出来的css代码：
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;
}
}
编译出来的css代码如下：
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;
}
}
编译出来的css代码：
a
{
color: red;
}
a:hover
{
color: green;
}
伪类嵌套都是结合“&”符号来实现的，编译的时候“&”会替换成相应的选择器。
举例：伪元素嵌套
.clearfix
{
*zoom:1;
&:after
{
clear:both;
content:"";
display:block;
height:0;
visibility:hidden;
}
}
编译出来的css代码：
.clearfix{*zoom:1;}
.clearfix::after
{
clear:both;
content:"";
display:block;
height:0;
visibility:hidden;
}
伪元素嵌套同样也是结合“&”符号来实现的，编译的时候“&”会替换成相应的选择器。上面这个是清除浮动最常用的方法
标签：Scss,编译,伪类,color,嵌套,font,选择器 来源： https://www.cnblogs.com/hou-yuan-zhen/p/11615373.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。