less03 混合

Posted 2020-09-22 672530440

less

//基本混合
.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;
}

css

.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;
}

 less

//传统写法
//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: 123;
    }
  }
}
.a{
  .b{
    .c&{  //把&放在所有父类的前面去
      color: 123;
    }
  }
}

p, a, ul, li {
  border-top: 2px dotted #366;
  &   & {
    border-top: 0;
  }
}

a , b ,c{
  &   &  & {
    border-top: 0;
  }
}

css

.a .b .c {
  color: 123;
}
.c.a .b {
  color: 123;
}
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: 0;
}
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: 0;
}