一、Less

Less是CSS的扩展语言，整合官网文档的思维导图如下：

官网链接：less.bootcss.com/

二、BEM规范

BEM规范是一个前端CSS命名规范，其中B、E、M分别是Block(块)、Element(E)、Modifier(修饰符)的简写。Block是一个有意义的独立实体。Element是Block的一部分，没有独立的含义并与Block相关联。Modifier是改变Block或者Element外观或者行为的标志。

__ 双下划线：双下划线用来连接Element，表明关系，如：.form__input { }，

--双中划线：双中划线用来连接Modifier，表明状态，如：.form__submit--disabled { }

三、在Less中使用BEM规范

使用父选择器&，可以简洁地使用BEM规范

.article {
    max-width: 1200px;
    &__body {
        padding: 20px;
    }
    &__button {
        padding: 5px 8px;
        &--primary {
            background: blue;
        }
        &--success {
            background: green;
        }
    }
}

编译结果为：

.article {
    max-width: 1200px;
}

.article__body {
    max-width: 1200px;
    padding: 20px;
}
.article__button {
    max-width: 1200px;
    padding: 5px 8px;
}
.article__button--primary {
    max-width: 1200px;
    padding: 5px 8px;
    background: blue;
}
.article__button--success {
    max-width: 1200px;
    padding: 5px 8px;
    background: green;
}