当前位置：首页 > article >正文

less相关

article 2024/12/23 22:35:07

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

    //加上&符号的，indicate同级关系，意思是同时有input和red-color的，才会有用
    // √  <div class="input red-color">第三个div</div>
    // 错误用法，在input类的子代里使用red-color，不会起作用
    // ×  <div contenteditable="true" class="input">
    //       inputinputinputinput
    //       <div class="red-color">input类里面的red-color类</div>
    //     </div>
    &.red-color {
      color: red;
    }

    // 这种不加&符号的，indicate父子关系，input后面的子元素的类名是red-color才会起作用
    //√  <div contenteditable="true" class="input">
    //     inputinputinputinput
    //     <div class="red-color">input类里面的red-color类</div>
    //   </div>
    .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;
}