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