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: $width;
    height: $height;
    background-color: $bgColor;
}

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

  ✦定義格式： ‘@mixin 名稱 (變量1，變量2...) {  // 樣式  }’， 也可以不帶變量，變量可以設置默認值（帶默認值的引用時可以不傳）

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

  ✦優點：將相似的樣式提取出來，允許傳入參數的自定義設置，代碼簡潔、使用方便

 

  ③繼承（@extend）

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

  ✦使用@extend 來實現繼承操作

  ✦繼承就是將一個樣式的數據引入到一個樣式中，個人覺得有點類似引用無參的混合器，混合器中存放一段相同的代碼

 

  ④屬性嵌套

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

  ✦屬性嵌套讓層級的樣式看起來更加直觀優美

 

  ⑤占位符（%）

<style lang="scss" scoped>
%comdiv {
    width: 300px;
    height: 300px;
    color: $titleColor;
}
.myscss {
    .demo1 {
        @extend %comdiv;
    }
    /*
        編譯后
        .myscss .demo1 {
            width: 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