一、变量
$global-color:red;
.nav{
background:$global-color;
}
二、sass命名时横杠和下划线不区分
$global-color:yellow;
.nav{
background-color:$global_color
}
.footer{
background-color:$global-color
}
三、变量中可以套用变量
$global-color:red;
$global-border:1px solid $global-color;
.nav{
backhround:$global-color;
border:$global-border;
}
四、嵌套规则
#head{
.nav{
background:red;
.logo{
float:left;
}
}
p{
color:red
}
}
五·、伪类和直接调用父级符号&
#head{
a{
color:biue;
&:hover{
color:red
}
}
}
六、sass的导入
@import "header";
.main{
color:red;
}
@import "fotter";
七、嵌套导入
@import "header";
.main{
color:red;
@import "main";
}
@import "fotter";
八、关于注释
以下注释会被编译
/*
*时间:2017-11-18
*auther:liumingwang
*
*/
以下注释不会被编译
//color 静默注释
九、默认变量
@import "header";
$color:red!default; //这里是默认变量,“header”里面有个这个变量就用header里面的,header里面没有,就用此页面的默认变量
.head{
color:$color;
}
十、混合器的使用mixin
@mixin border-radius{ -moz-border-radius:5px; -webkit-border-radius:5px; -o-border-radius:5px; -ms-border-radius:5px; border-radius:5px;
} .header{ &-nav{ @include border-radius; } }
十一、混合器mixin传参数
@mixin links-color($nomal,$hover,$visited,$active){ color:$nomal; &:hover{ color:$hover;
} &:visited{ color:$visited } &:active{ color:$active } } .header{ @include links-color(red,blue,green,yellow) }
十二:继承
.center{
margin:0 auto;
}
.main{
@extend .center
}
十三:占位符