sass1

//变量 用$符号来定义

$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));

}