less 安装依赖 1 npm install less less-loader --save或者2 cnpm install less less-loader --save 修改配置 在 vue 项目中 build/webpack.base.conf.js： moduls 对象的 rules 数组中最后添加 引入 在每个想要使用 less 的 vue 文件中style 加上 lang=“less” 1<style lang="less" scoped> 2</style> SCSS SCSS 即是 SASS 的新语法，是 Sassy CSS 的简写，是 CSS3 语法的超集，也就是说所有有效的 CSS3 样式也同样适合于 SASS。 SASS 是 CSS3 的一个扩展，增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行的工具或 WEB 框架插件把它转换成标准的、格式良好的 CSS 代码。 SCSS 是 SASS 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 SASS 的强大功能。唯一不同的是，SCSS 需要使用分号和花括号而不是换行和缩进。 SCSS 对空白符号不敏感。 安装步骤： npm install node-sass --save-dev //安装 node-sass npm install sass -loader --save-dev //安装 sass-loader npm install style-loader --save-dev //安装 style-loader 出现以下问题可能是版本错误 Modele build failed: TypeError: this.getResolve is not a function at Object.loader... 处理方法 将 "sass-loader": "^8.0.0"，更换成了 "sass-loader":"^7.3.1" package.json 中查找替换 npm install npm run dev 特性： 一、（节点）可嵌套性 这个是基础，用得太多太多了，必须掌握 二、变量 变量以$开头（通常网站会有基础变量，譬如基础字体，基础色调等，可以将他们赋值给一个变量，以后调用变量就好了，很类似 js 里的变量） 三、 Mixins(混合@mixin)：可重用性高，可以注入任何东西 注意点： 1、可以相互调用，但是不能拿自己调用自己，形成递归 2、通过@include 引用 四、@extend：允许一个选择器继承另一个选择器 五、 @function:函数功能，用户使用@function 可以去编写自己的函数（常用） 使用语法： 使用 @function+函数名称，每个函数都需要有返回值的内容 六、引用父元素&：在编译时，&将被替换成父选择符（常用） 七、计算功能（会用但是不多吧） 八、组合连接： #{} ： 变量连接字符串（目前用到的是这个） 九、循环语句：（很少用到） 十、if 语句：（很少用到）