less相关

.root {
  width: 200px;
  height: 200px;
  background-color: antiquewhite;
  .input {
    background-color: rgb(60, 65, 65);

    //加上&符号的,indicate同级关系,意思是同时有input和red-color的,才会有用
    // √  
第三个div
// 错误用法,在input类的子代里使用red-color,不会起作用 // ×
// inputinputinputinput //
input类里面的red-color类
//
&.red-color
{ color: red; } // 这种不加&符号的,indicate父子关系,input后面的子元素的类名是red-color才会起作用 //√
// inputinputinputinput //
input类里面的red-color类
//
.red-color
{ color: red; } &:hover{ color: blue; } } }

编译后的css文件

.root {
  width: 200px;
  height: 200px;
  background-color: antiquewhite;
}
.root .input {
  background-color: #3c4141;
}
.root .input.red-color {
  color: red;
}
.root .input .red-color {
  color: red;
}
.root .input:hover {
  color: blue;
}

你可能感兴趣的:(less,前端,css)