先把html结构放上来

<body>
    <div class="box">
        <p>asdfasf</p>
    </div>
</body>

对于类名为box的盒子来说，我们想要更改下面的p标签的css属性，需要像下面这样来写

.box {
    width: 200px;
    height: 300px;
    background-color: pink;
}
.box p {
    color:red;
    font-size: 40px;
}

但是，有了less的嵌套，咱们就不用这样写了。
我们知道p是div的子元素。那么less文件这样写就可以了

.box {
    width: 200px;
    height: 300px;
    background-color: pink;
    p {
        color:red;
        font-size: 40px;
    }
}

在vscode里装上less插件后，我们保存这个less文件会自动生成一个css文件，很好用很方便。

如果要写格式的话，我觉得可以这样写
如果.box>.new>p
那么我们的less文件就是.box套.new，.new里套p

.box {//.box属性
    .new {//.new属性
        p {
            //p标签属性
        }
    }
}

如果遇见（交集|伪类|伪元素选择器）
内层选择器的前面没有&符号，则它被解析为父选择器的后代
如果有&符号，它就被解析为父元素自身或者父元素的伪类

.box {
    width: 200px;
    height: 200px;
    a {
        color:red;
        &:hover {
            color: blue;
        }
    }
}

生成的css文件如下：

.box {
  width: 200px;
  height: 200px;
}
.box a {
  color: red;
}
.box a:hover {
  color: blue;
}