sass属性嵌套

/*注意:定义的变量若是没有使用则不会编译到css文件中。*/
/*1）sass的局部变量*/
$font:14px;//定义
$font:12px ！default; //没有default时是重新赋值，有了它则先取12再重新赋值为14
$maps:(color:black,border-color: blue);//maps定义多值变量
$className:main;//定义类名（此处修改了类名则使用该类名的地方也会相应改变）
body{
/*局部变量*/
$color:red;
/*2）全局变量*/
$color: yellow !global;
color: $color;
}
footer{
font-size: $font;
color: $color;
background-color: map-get($maps,color);
border-color: map-get($maps,border-color);
}

/*3）使用定义好的类*/
.#{$className}{
color: map-get($maps,color);
}
/*4）中横线和下划线的效果一致*/

$text-info:blue;
$text_info:green;
h1{
color: $text-info; //结果为green，因为重新赋值了
}

/*5）样式导入：@import 文件名
1、部分文件（约定：文件名以下划线开头，不会编译成对应的css文件）
2、嵌套导入
3、css原生导入（以.css结尾；导入地址是url：http://xx/css.css;
文件名是css的url()值）
4、scss导入：@import scss文件名(可以不写后缀名或下划线)
*/

/*6）样式书写步骤
1、根据布局html文件的布局来书写样式嵌套的层级关系如：
body{
header{
.logo{
img{}
}
.nav{

}
}
}

*/

/*属性嵌套*/
body{
footer {
background:{
color: red;
size: 100% 100%;
}
}
a{
color: yellow;
&:hover{
color:blue;
}
span{
color: lightgreen;
}
.content{
color: lightgrey;
}
/*引用父选择器a*/
&.box{
color: lightpink;
}
}
}
/*属性嵌套编译结果
body footer {
background-color: red;
background-size: 100% 100%;
}
body a {
color: yellow;
}

body a:hover {
color: blue;
}

body a span {
color: lightgreen;
}
body a .content {
color: lightgrey;
}
body a.box {
color: lightpink;
}
*/