vue 里面使用sass进行代码复用mixin简单用法

注释： less使用@表示变量， sass使用$表示变量

vue.config.js配置

module.exports = {
  publicPath: '/main',
  productionSourceMap: false, // 生产环境是否生成 SourceMap
  css: {
    loaderOptions: {
      sass: {
        prependData: `$env: ${process.env.NODE_ENV};
        @import "@/style/base/mixins.scss";
        @import "@/style/base/variables.scss";`// mixins.scss用来存储css函数，供全局使用
       // variables.scss存储变量
      }
    }
  }
}

mixins.scss

/* 混入接收两个参数 */
@mixin bordered($color, $width) {
  border: $width solid $color;
}

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

variables.scss

// 边框颜色
$border-color: #c1c1c1;

使用

    .searchform {
      @include flex-center;
      @include bordered($border-color, 1px);
    }

新了解的一些高级用法：(支持1.条件判断2.for while循环 each命令3.自定义函数)

条件判断

　　p {
　　　　@if 1 + 1 == 2 { border: 1px solid; }
　　}
　@if $height > 20 {
　　　　background-color: #000;
　　} @else {
　　　　background-color: #fff;
　　}

for 循环

用#{}包裹变量连接字符串

　　@for $i from 1 to 10 {
　　　　.border-#{$i} {
　　　　　　border: #{$i}px solid blue;
　　　　}
　　}
　$i: 6;

　　@while $i > 0 {
　　　　.item-#{$i} {  2em * $i; }
　　　　$i: $i - 2;
　　}
　　@each $member in a, b, c, d {
　　　　.#{$member} {
　　　　　　background-image: url("/image/#{$member}.jpg");
　　　　}
　　}

自定义函数

　　@function double($n) {
　　　　@return $n * 2;
　　}

　　#sidebar {
　　　　 double(5px);
　　}

继承

.class1 {
　　　　border: 1px solid #ddd;
　　}
　.class2 {
　　　　@extend .class1;
　　}

内置颜色函数

lighten(#cc3, 10%) // #d6d65c