//变量 用$符号来定义
$red:red;
ul{
color:$red;
background-color:$red;
}
//变量的值也可以引用其他的变量
$border:1px solid $red;
div{
border:$border;
}
//嵌套遇见伪类元素时用
a{
font-size:16px;
&:hover{
color:$red;
}
}
a span{
color:blue;
}
//属性嵌套
h1{
border:{
style:solid;
width:2px;
color:#ccc;
}
}
//继承 用关键字@extend
.ww{
@extend a;
}
注意，a下面的span也被继承啦！
//最重要的
//Minxin
@mixin app{
font-size:20px;
color:deeppink;
}
.mm{
@include app;
}
//带参数的
@mixin app1($wh:20px,$he:20px){
width:$wh;
height:$he;
}
.mv{
@include app1(30px,40px);
}
//带很多参数的情况用...
@mixin mixName($shadow...) {
box-shadow:$shadow;
}
.box{
@include mixName(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}
