sass安装与使用

一、安装

npm install node-sass -D
npm install sass-loader -D

其实之所以用到node-sass、是因为sass-loader的缘故。sass-loader 是将sass文件编译成css，而sass-loader又依赖于node-sass，所以需要安装node-sass

-D是安装到开发依赖

二、问题

安装好之后立即使用可能会遇到问题，最常见的就是版本问题
这个时候就需要降低版本
首先需要卸载之前安装的版本：

npm uninstall node-sass sass-loader

然后安装新的版本：

npm i node-sass@(版本号)或 npm i node-sass@4.(指定安装四点几的版本)
npm i sass-loader@(版本号)或 npm i sass-loader@8.(指定安装八点几的版本)

我现在用的版本：

“node-sass”: “^4.12.0”
“sass-loader”: “^7.0.3”,

三、使用

普通样式

这里的普通样式指的是没有定义变量的文件
在项目中新建style文件夹，再建一个index.scss文件，在这个文件中使用sass编写样式

在main.js中引入这个全局样式文件：

// 引入全局样式
import '@/styles/index.scss'

变量

sass可以使用变量，如：

$red:#D63108

变量名使用$开头，紧跟变量名，颜色、字号等都可以使用变量，将项目的主体颜色用变量名的方式来写，好处是可以统一修改项目主体颜色。

在styles文件中新建variables文件，在里面定义一些全局变量

$red:#FF8533;
$header:#45b97c;
$navMenu:#1d953f

使用方式

使用方式一：单独引入
在需要使用的文件中导入：

<style scoped lang="scss">//此处lang=“scss”必须要添加
@import "src/styles/variables";//导入样式文件
.header-container{
  width: 100%;
  height: 100px;
  background: $red;//使用变量
}
</style>

使用方式二：全局引入
sass变量是不能同普通样式一样在main.js中引入了就可以全局使用的，需要进行一些配置：
在项目文件下新建vue.config.js文件，在文件中添加如下代码：

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                data: `@import "~@/styles/variables.scss";`
            }
        }
    }
}

具体配置可以查看这里

行内样式使用sass变量

将使用的变量导出：

:export{
  navMenuColor:$navMenuColor;
}

在需要使用的文件中引入，在计算属性中声明：

import variables from "@/styles/variables.scss"

computed:{
    variables(){
      return variables
    }
  },

在行内样式中使用：

 :style="{'background-color': variables.navMenuColor}"

mixin

同样的先建一个文件：

在vue.config.js中引入：

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                data: `
                @import "~@/styles/variables.scss";
                @import "~@/styles/mixin.scss";
                `
            }
        }
    }
}

在这个文件中写入一些代码，比如我们想统一flex的样式：

@mixin flex($jc: center, $ai: center, $fw: wrap, $ac: center) {
  display: flex;
  justify-content: $jc;
  align-items: $ai;
  flex-wrap: $fw;
  align-content: $ac;
}

没有使用mixin之前，代码和结果如下：
HTML：

<div class="outer">
	<div class="inner"></div>
</div>

CSS：

.outer{
  width: 200px;
  height: 200px;
  border: 1px solid black;

  .inner{
    width: 100px;
    height: 100px;
    border: 1px solid red;
  }
}

结果：

我们再加入mixin中flex的样式：
HTML不变，CSS：

.outer{
  width: 200px;
  height: 200px;
  border: 1px solid black;
  @include flex();//加入这行代码

  .inner{
    width: 100px;
    height: 100px;
    border: 1px solid red;
  }
}

结果：

如果你不想要水平居中，想要水平左对齐，那可以这样子写：

@include flex($jc:left);

结果：

想要改变那个样式就传对应样式的值

其他使用方式

在calc中使用：

width: calc(100% - #{$navMenuWidth});