less04 运算符命名空间

Posted 2020-09-22 672530440

less

//.wp{
//  margin: 0 auto;
//  background: forestgreen;
//  width: 450px + 450;  //有一个有单位就可以
//  height: 400 + 400px;
//}

//涉及到优先级，使用()区分优先级
.wp{
  margin: 0 auto;
  width: (550 - 50)*2 + 24px;
  height: 400 + 400px;
  background:#ff0000 - 55;  //#000021   c8c8c8
}

//rgb模式他的值是 0~255 ，当你的值超过255 ，那么就会以255进行相加操作

.wp {
  background: #ff0000;
  z-index: blue(#050506);
}

css

.wp {
  margin: 0 auto;
  width: 1024px;
  height: 800px;
  background: #c80000;
}

.wp {
  background: #ff0000;
  z-index: 6;
}

less

//#bgcolor(){
//  background: #ffffff;
//  .a{
//    color: #888888;
//    &:hover{
//      color: #ff6600;
//    }
//    .b{
//      background: #ff0000;
//    }
//  }
//}
//
//.wi{
//  background: green;
//  color: #fff;
//  .a{
//    color: green;
//    background: #ffffff;
//  }
//}
//
//.bgcolor1{
//  background: #fdfee0;
//  #bgcolor>.a;
//}
//.bgcolor2{
// .wi>.a;
//}


//省略>写法
#bgcolor(){
  background: #ffffff;
  .a{
    color: #888888;
    &:hover{
      color: #ff6600;
    }
    .b{
      background: #ff0000;
    }
  }
}
.wi {
  background: green;
  color: #fff;
  .a {
    color: green;
    background: #ffffff;
  }
}
.bgcolor1{
  background: #fdfee0;
  #bgcolor .a;    //选择器
}
.bgcolor2{
  .wi .a;
}

css

.wi {
  background: green;
  color: #fff;
}
.wi .a {
  color: green;
  background: #ffffff;
}
.bgcolor1 {
  background: #fdfee0;
  color: #888888;
}
.bgcolor1:hover {
  color: #ff6600;
}
.bgcolor1 .b {
  background: #ff0000;
}
.bgcolor2 {
  color: green;
  background: #ffffff;
}