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

巴特西

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

最新文章

热门文章