//基本混合

.font_hn{

  color: red;

  font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;

}

h1{

  font-size: 28px;

  .font_hn;

}

h2{

  font-size: 24px;

  .font_hn;

}

//不带输出的混合，类名后面使用()

.font_hn(){

  color: red;

  font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;

}

h1{

  font-size: 28px;

  .font_hn;

}

h2{

  font-size: 24px;

  .font_hn;

}

//带选择器的混合

.my-hover-mixin {

  &:hover {        //&代表父级

    border: 1px solid red;

  }

}

button {

  .my-hover-mixin();

}

h1{

  .my-hover-mixin();

}

//带参数的混合，这个样式不输出

.border(@color){

  border: 1px solid @color;

}

h1{

  &:hover{

    .border(green);

  }

}

h2{

  &:hover{

    .border(#000);

  }

}

/*带参数并且有默认值的混合*/

//带参数并且有默认值的混合

.border_you(@color:red){

  border: 1px solid @color;

}

h1{

  &:hover{

    .border_you();

  }

}

h2{

  &:hover{

    .border_you(yellow);

  }

}

/*带多个参数的混合*/

//带多个参数的混合

.mixin(@color; @padding:xxx; @margin: 2) {

  color-3: @color;

  padding-3: @padding;

  margin: @margin @margin @margin @margin;

}

.divmaizi{

  .mixin(red;)

}

.divmaizi {

  .mixin(1,2,3;something, ele;132);

}

.divmaizi {

  .mixin(1,2,3);    //3个参数

}

.divmaizi {

  .mixin(1,2,3;);    //一个参数

}

//如果传参的括号里面全部都是以“，”分割，那么会依次传给各个参数值，

//如果传参的括号里面既有“，”又有“；”那么，会把“；”前面的看作一个整体，传给一个参数值

/*定义多个具有相同名称和参数数量的混合*/

.mixin(@color) {

  color-1: @color;

}

.mixin(@color; @padding:2) {

  color-2: @color;

  padding-2: @padding;

}

.mixin(@color; @padding; @margin: 2) {

  color-3: @color;

  padding-3: @padding;

  margin: @margin @margin @margin @margin;

}

.some .selector div {

  .mixin(#008000);

}

//命名参数

/*命名参数*/

.mixin(@color: black; @margin: 10px; @padding: 20px) {

  color: @color;

  margin: @margin;

  padding: @padding;

}

.class1 {

  .mixin(@margin: 20px; @color: #33acfe);

}

.class2 {

  .mixin(#efca44; @padding: 40px);//根据参数类型传值不根据位置传值

}

.class3{

  .mixin(@padding: 80px;)

}

/*@arguments所有可变参数*/

.border(@x:solid,@c:red){

  border: 21px @arguments;

}

.div1{

  .border(solid);

}

//

.border(all,@w: 5px){

  border-radius: @w;

}

.border(t_l,@w:5px){

  border-top-left-radius: @w;

}

.border(t_r,@w:5px){

  border-top-right-radius: @w;

}

.border(b-l,@w:5px){

  border-bottom-left-radius: @w;

}

.border(b-r,@w:5px){

  border-bottom-right-radius: @w;

}

footer{

  .border(t_l,10px);

  .border(b-r,10px);

  background: #33acfe;

}

//混合的返回值

.average(@x, @y) {

  @average: ((@x + @y) / 2);

  @he:(@x + @y);

}

div {

  .average(16px, 50px);

  padding: @average;

  margin: @he;

}

.font_hn {

  color: red;

  font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;

}

h1 {

  font-size: 28px;

  color: red;

  font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;

}

h2 {

  font-size: 24px;

  color: red;

  font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;

}

h1 {

  font-size: 28px;

  color: red;

  font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;

}

h2 {

  font-size: 24px;

  color: red;

  font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;

}

.my-hover-mixin:hover {

  border: 1px solid red;

}

button:hover {

  border: 1px solid red;

}

h1:hover {

  border: 1px solid red;

}

h1:hover {

  border: 1px solid #008000;

  border: 21px #008000 #ff0000;

}

h2:hover {

  border: 1px solid #000000;

  border: 21px #000000 #ff0000;

}

/*带参数并且有默认值的混合*/

h1:hover {

  border: 1px solid #ff0000;

}

h2:hover {

  border: 1px solid #ffff00;

}

/*带多个参数的混合*/

.divmaizi {

  color: 1, 2, 3;

  margin: 10px;

  padding: 20px;

}

/*定义多个具有相同名称和参数数量的混合*/

/*命名参数*/

.class1 {

  color: #33acfe;

  margin: 20px;

  padding: 20px;

}

.class2 {

  color: #efca44;

  margin: 10px;

  padding: 40px;

}

.class3 {

  color: #000000;

  margin: 10px;

  padding: 80px;

}

/*@arguments;*/

.div1 {

  border: 1px solid solid;

  border: 21px solid #ff0000;

}

footer {

  border: 21px t_l 10px;

  border-top-left-radius: 10px;

  border: 21px b-r 10px;

  border-bottom-right-radius: 10px;

  background: #33acfe;

}

div {

  padding: 33px;

  margin: 66px;

}

//传统写法

//header{

//  width: 960px;

//}

//header h1 {

//  font-size: 18px;

//  color: green;

//}

//header .logo{

//  width: 300px;

//  height: 150px;

//  background: darkred;

//}

//header .logo:hover{

//  background: forestgreen;

//}

//less写法

//header{

//  width: 960px;

//  h1{

//    font-size: 18px;

//    color: green;

//  }

//  .logo{

//    width: 300px;

//    height: 150px;

//    background: darkred;

//    &:hover{

//      background: forestgreen;

//    }

//  }

//}

.a{

  .b{

    .c{

      color:;

    }

  }

}

.a{

  .b{

    .c&{  //把&放在所有父类的前面去

      color:;

    }

  }

}

p, a, ul, li {

  border-top: 2px dotted #366;

  &   & {

    border-top:;

  }

}

a , b ,c{

  &   &  & {

    border-top:;

  }

}

.a .b .c {

  color:;

}

.c.a .b {

  color:;

}

p,

a,

ul,

li {

  border-top: 2px dotted #366;

}

p p,

p a,

p ul,

p li,

a p,

a a,

a ul,

a li,

ul p,

ul a,

ul ul,

ul li,

li p,

li a,

li ul,

li li {

  border-top:;

}

a a a,

a a b,

a a c,

a b a,

a b b,

a b c,

a c a,

a c b,

a c c,

b a a,

b a b,

b a c,

b b a,

b b b,

b b c,

b c a,

b c b,

b c c,

c a a,

c a b,

c a c,

c b a,

c b b,

c b c,

c c a,

c c b,

c c c {

  border-top:;

}