vue工程化-Less与BEM命名风格

Less变量小结

嵌套小结：

（1）Less模仿HTML的结构，使用嵌套代层级关系，使代码更简洁（嵌套层级关系）
（2）可以结合&，达到同级伪元素效果（同级层级关系）
（3）结合&也可以通过名字实现拼接（同级层级关系）
（4）应用：对伪类的使用hover、focus，&对连接的使用_area，嵌套层级关系应用

混合 (Mixin)

（1）无参数混合
（2）带参数混合
（3）默认参数混合
①不传参时使用默认值
②传参时覆盖默认值

JS语句

配置启动Less中JS相关配置，打开less.min.js修改参数javascriptEnabled为true即可

工程化之less

（1）安装less和less-loader

（2）添加less相关配置（build/webpack.base.conf.js）
module下的rules

{
        test: /\.less$/,
        loader: "style-loader!css-loader!less-loader"    
}

（3）代码中的style标签中加上 lang="less"即可

BEM命名风格

BEM是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。
在CSS类名中“–”和“__”的出现是便是源于BEM。