less 和 Scss 的配置使用以及特点

less

安装依赖

•  npm install less less-loader --save
• 或者
• cnpm install less less-loader --save

 

修改配置

在 vue 项目中 build/webpack.base.conf.js：

moduls 对象的 rules 数组中最后添加

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

 

引入

在每个想要使用 less 的 vue 文件中

// style 加上 lang=“less”
<style lang="less" scoped></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 语句：（很少用到）