Sass的了解和使用

什么是Sass？

        Sass是一个Css预处理器

        Sass是Css扩展语言，可以帮助我们减少CSS重复的代码，节省开发时间

        Sass完全兼容所有版本的CSS

        Sass扩展了CSS3，增加了规则、变量、混入、选择器、继承、内置函数等特性

        Sass生成良好格式化的css代码，易于组织和维护

        Sass文件后缀为.scss

为什么使用Sass？

        CSS本身语法不够强大，导致重复编写一些代码，无法实现服用，而且代码也不方便维护

        Sass引入合理的样式复用机制，增加来了规则、变量、混入、选择器、继承、内置函数等特性

Sass使用实例

//Sass使用实例
/* 定义颜色变量，要修改颜色值，修改这里就可以了 */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;

/* 使用变量 */
.main-header {
  background-color: $primary_1;
}

.menu-left {
  background-color: $primary_2;
}

.menu-right {
  background-color: $primary_3;
}

  Sass是如何工作的？

 浏览器并不支持Sass代码。因此，你需要使用一个Sass预处理器将Sass代码转换为CSS代码

 Sass的安装

// 全局安装Sass
npm install -g sass

 Sass在项目中使用方法（可以直接使用.scss）

// 安装sass-node
npm install sass-loader node-sass --save-dev

 webpack.json文件的配置

 Sass全局变量

全局配置变量，项目中所有的scss文件均可使用变量和方法，无需再次单独引入

// 依赖
npm install sass-resources-loader -D

webpack.json文件配置

 {
     test: sassRegex,
     exclude: sassModuleRegex,
     use: getStyleLoaders(
        {
           importLoaders: 3,
           sourceMap: isEnvProduction
           ? shouldUseSourceMap
           : isEnvDevelopment,
         },
           'sass-loader'
          ).concat({
              loader:'sass-resources-loader',
              options:{
              resources:[
              //这里按照你的文件路径填写
              path.resolve(__dirname,'./../src/styles/main.scss')
             ]
            }
          }),
        // Don't consider CSS imports dead code even if the
        // containing package claims to have no side effects.
        // Remove this when webpack adds a warning or an error for this.
        // See https://github.com/webpack/webpack/issues/6571
           sideEffects: true,
      },

项目中使用方法 

将公共的样式文件文件引入到main.scss全局文件中，将项目中.scss文件引入到项目中

定义变量  例：$color:red;

在.scss文件中引入文件使用@import