Less 提供了使用嵌套(nesting)代替层叠或与层叠结合使用的能力,并且模仿了 HTML 的组织结构。

    1. .bordered {
    2. border-top: dotted 5px goldenrod;
    3. border-bottom: solid 3px black;
    4. }
    5. div {
    6. background-color: wheat;
    7. width: 100px;
    8. height: 200px;
    9. .bordered();
    10. .span {
    11. color: rebeccapurple;
    12. .bordered();
    13. }
    14. }

    (& 表示当前选择器的父级):

    1. .bordered {
    2. border-top: dotted 5px goldenrod;
    3. border-bottom: solid 3px black;
    4. }
    5. div {
    6. background-color: wheat;
    7. width: 100px;
    8. height: 200px;
    9. .bordered();
    10. .span {
    11. color: rebeccapurple;
    12. .bordered();
    13. }
    14. &:hover{
    15. background-color: red;
    16. }
    17. }