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
;
}
伪元素嵌套同样也是结合“&”符号来实现的,编译的时候“&”会替换成相应的选择器。上面这个是清除浮动最常用的方法