less嵌套和父选择器

嵌套

Less 提供了使用嵌套(nesting)代替层叠或与层叠结合使用的能力
例子
less

.textarea1{
    margin: 10 * 10px;
    padding: ~"10 * 10px";
    .child1{
        color: red;
    }
}

css

.textarea1 {
  margin: 100px;
  padding: 10 * 10px;
}
.textarea1 .child1 {
  color: red;
}

这种嵌套有利于查找且更加美观
这时要是想增加选择器，便可以在其中使用父选择器

父选择器（&）

只需在选择器前增加&即可
例子
less

.textarea1{
    margin: 10 * 10px;
    padding: ~"10 * 10px";
    .child1{
        color: red;
    }
    &:hover{
        color: yellow;
    }
}

css

.textarea1 {
  margin: 100px;
  padding: 10 * 10px;
}
.textarea1 .child1 {
  color: red;
}
.textarea1:hover {
  color: yellow;
}

这种规则就像是在写html，更加便捷，在vscode中还可以进行折叠，使代码看着更加有层次感
如下