vue使用--saas的引入与使用

 什么是saas、scss？

 saas是一种动态样式语言，属于CSS预处理器，为CSS增加了一些编程特性，比如变量、嵌套、函数、继承、运算等等。开发人员可以像使用js等语言一样使用saas进行css的编程开发。

 scss是saas改进版本saas 3的简称，它对原saas的语法兼容，区别于使用 {} 代替了原来的缩进；

 1.安装与引入配置

 初始化vue-cli项目，这里就不详述了，需要的可以查看之前写的一篇随笔，穿梭>>>

 依赖安装，执行以下安装命令：

npm install node-sass --save-dev
npm install sass-loader --save-dev

 配置webpack.base.conf.js --- 在module节点rules数组中添加以下代码

{ 
   //配置编译识别sass! 
   test: /.scss$/,
   loaders: ["style", "css", "sass"]
} 

 2.使用示例

 ①变量定义 ($)

<style lang="scss" scoped>
$fontcolor: #88f1e8;  // 定义变量fontcolor, 格式'$变量名: value'

.myscss {
    color: $fontcolor； // 使用变量
}
</style>

  ✦定义格式： ‘$变量名: value’，注意value不需要引号一起来

  ✦使用：'$变量名'

  ✦注意：使用scss，style标签的要设置 lang="scss"

  ②混合器使用（@mixin）

<style lang="scss" scoped>
// 定义mixin混合器
@mixin demoDiv ($height, $width, $bgColor: #eee) {
     $width;
    height: $height;
    background-color: $bgColor;
}

.myscss {
    // 使用
    @include demoDiv(300px, 300px)
    /*
        编译后
         300px;
        height: 300px;
        background-color: #eee;
    */
}
</style>

  ✦定义格式： ‘@mixin 名称 (变量1，变量2...) {  // 样式  }’， 也可以不带变量，变量可以设置默认值（带默认值的引用时可以不传）

  ✦使用：'@include 名称 (value1, value2...)'

  ✦优点：将相似的样式提取出来，允许传入参数的自定义设置，代码简洁、使用方便

  ③继承（@extend）

<style lang="scss" scoped>
.myscss {
    .demo1 {
         100px;
        font-size: 14px;
    }
    .demo2 {
        @extend .demo1;  // 使用@extend 继承
        color: aqua;
    }
    /*
        编译后
        .myscss .demo1, .myscss .demo2 {
             100px;
            font-size: 14px;
        }
        .myscss .demo2 {
            color: aqua;
        }
    */
}
</style>

  ✦使用@extend 来实现继承操作

  ✦继承就是将一个样式的数据引入到一个样式中，个人觉得有点类似引用无参的混合器，混合器中存放一段相同的代码

  ④属性嵌套

<style lang="scss" scoped>
.myscss {
    .demo1 {
         100px;
        font-size: 14px;
    }
    /*
        编译后
        .myscss .demo1 {
             100px;
            font-size: 14px;
        }
    */
}
</style>

  ✦属性嵌套让层级的样式看起来更加直观优美

  ⑤占位符（%）

<style lang="scss" scoped>
%comdiv {
     300px;
    height: 300px;
    color: $titleColor;
}
.myscss {
    .demo1 {
        @extend %comdiv;
    }
    /*
        编译后
        .myscss .demo1 {
             300px;
            height: 300px;
            color: $titleColor;
        }
    */
}
</style>

  ✦占位符使用 % 声明

  ✦占位符与普通样式的区别在于，不被@extend调用就不会被编译

  ⑥变量嵌套引用（#{}）

<style lang="scss" scoped>
$divborder: left;
.myscss {
    .demo1 {
        border-#{$divborder}: 1px solid #eee;
    }
    /*
        编译后
        .myscss .demo1 {
            border-left: 1px solid #eee;
        }
    */
}
</style>

  ⑦编程式方法　　

//1. @if...@else...
.demo { 
    @if $ival > 3 { 
        // do something
    } @else {
        // do something
    } 
}    

//2. for循环
//@for $i from <start> through <end>  包含end
//@for $i from <start> to <end>  不包含end
@for $i from 1 to 3 {
    .demo_#{$i} {
        color: red;
    }       
}

//3.while 循环
// @while <表达式>
$wval: 3
@while $wval > 1 {
    //do something
    $wval: $wval - 1;
}

//4.each循环
//@each $var in <list>($var为变量值，list为sassscript表达式）
@each $var in demo1, demo2 {
    .#{$var} {
        color:red;
    }
}


//5.function函数（自定义函数）
//@function 
@function getcolor($sn){
    @if $sn = 1 {
        return red;
    } @else {
        return blue;
    }
}      

  其它功能的使用，后期再补充✨

 3.抽离共用

  对于变量、混合器、公共样式等，我们如果像上面的示例一样都写在组件当中，问题就不仅是代码的冗余，还失去了使用的意义，所以我们需要将变量、混合器等抽离出来，放到公共的scss文件中。

  ①文件目录

  我们创建三个scss文件，变量文件（var.scss）、混合器文件（mixin.scss）、公共样式文件（common.scss）

 

  ②引用

  在app.vue中引入公共样式（变量和混合器不在此引入，具体一会说明）

<style>
@import "static/css/common.scss";   /*引入公共样式，在组件中直接使用样式即可*/
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

  在utils.js（build>utils.js）中引入变量和混合器文件，在utils.js中添加以下：

exports.cssLoaders = function (options) {
   // 其它默认代码
   function generateSassResourceLoader () {
    var loaders = [
        cssLoader,
        'sass-loader',
        {
            loader: 'sass-resources-loader',
            options: {
                resources: [
                    path.resolve(__dirname, '../src/assets/var.scss'),
                    path.resolve(__dirname, '../src/assets/mixins.scss')
                ]
            }
        }
    ]
    if (options.extract) {
        return ExtractTextPlugin.extract({
            use: loaders,
            fallback: 'vue-style-loader'
        })
    } else {
        return ['vue-style-loader'].concat(loaders)
    }
  }

  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateSassResourceLoader(),  //更改为generateSassResourceLoader
    scss: generateSassResourceLoader(),  //更改为generateSassResourceLoader
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}

  之所以不在vue文件中引用变量和混合器文件，是由于变量作用域的问题，需要在用到的vue组件中进行引用，这样会造成到生成代码的冗余。

  而不把common.scss放到utils中，是因为utils中的引入与手动import无差异，会造成生成代码的冗余

  so，common.js在app.vue中引入，变量等在utils中引入

---

参考文章与资料：

https://www.jianshu.com/p/bb1cedade712

https://www.cnblogs.com/roashley/p/7731865.html

https://www.cnblogs.com/chenguangliang/p/9540518.html

https://www.jianshu.com/p/5c3d457fbec9

https://blog.csdn.net/zhouzuoluo/article/details/81010331