html:
    (1)即使是less转的css,html里面也别忘了写结构啊

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <link rel="stylesheet" href="../less/128父元素和扩展.css">
    9. </head>
    10. <body>
    11.     <div class="box1">
    12.         <div class="box2"></div>
    13.     </div>
    14. </body>
    15. </html>

    css:
    （1）在.box1内部使用 &:hover,意即为 .box1:hover {}
    （2)另外写一个.box4; 使用.box1里面的内容， 采用.box4:extend(.box1) { 可以新加内容} ，那么可以直接使用.box1里面的内容
    （3）另外写一个.box5;使用.box4里面的内容，.box5 { .box4} 、// mixins,这是采用复制，效果相较于会低1点
    （4）如果在.box6 () {样式} ， 而且其他.boxn { .box6;} 即可直接使用，而.box6不会显示在css里面

    @w:200px;
.box1 {
    transition: 2s;
    background-color: #bfa;
    width: @w;
    height: @w;
    .box2 {
        width: 400px;
        height: 400px;
        background-color: pink;
    }
    &:hover {
        transform: scale(2);
    }
}

.box4:extend(.box1) {
    float: right;
    position: absolute;
    margin:500px;
    border: 1px solid black;
}

.box5 {
    .box4;
    background-color: orange;
}

    image.png