基于vue+sass实现主体换肤功能

• 最近有个需求：系统有深色和浅色两种主体，点击切换主体按钮实现换肤功能，我使用的是vue框架，本来感觉页面也不是很复杂，想用个变量判断来控制，后来想想还挺麻烦的，写一大坨代码也不太好看，于是用sass来实现。
  首先，建了个common.scss文件，定义两个Maps，*（Maps可视为键值对的集合，键被用于定位值 在css种没有对应的概念。 和Lists不同Maps必须被圆括号包围，键值对被都好分割 。 Maps中的keys和values可以是sassscript的任何对象）*用来存储深色和浅色所用到的色值，$colors-light和$colors-dark，

$colors-light: (
  bg-header: linear-gradient(45deg, #abc7da 0%, #1f8fd9 100%),
  bg-main-content: #ffffff,
  bg-block: #ffffff,
  bg-table-header: #ffffff,
  bg-li: linear-gradient(45deg, #ffffff 0%, #d2e3ed 100%),
  text-title: #353535,
  text-menu: #404040,
  text-logout: #ffffff,
  text-li: #353535,
  shadow-color: rgba(74, 144, 226, 0.8),
  shadow-block: rgba(0, 58, 129, 0.4),
);

$colors-dark: (
  bg-header: linear-gradient(-135deg, #003659 0%, #2b6993 100%),
  bg-main-content: #061b38,
  bg-block: linear-gradient(-180deg, rgba(19, 20, 41, 0.47) 79%, rgba(25, 68, 90, 0.32) 100%),
  bg-li: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(210, 227, 237, 0.2) 100%),
  bg-table-header: linear-gradient(45deg, #224969 0%, #08244c 100%),
  text-title: #ffffff,
  text-menu: #ffffff,
  text-logout: #1f8fd9,
  text-li: #ffffff,
  shadow-color: rgba(74, 144, 226, 0.14),
  shadow-block: rgba(0, 58, 129, 0.05),
);

这两个Maps里面存储了页面主体切换时要使用的色值，比如说字体颜色、按钮颜色或者列表背景色等等。。。然后在common.scss里定义了几个混合指令@mixin，

@mixin bg-color($key) {
  background: map-get($colors-light, $key);
  [data-theme="dark"] & {
    background: map-get($colors-dark, $key);
  }
}

@mixin text-color($key) {
  color: map-get($colors-light, $key);
  [data-theme="dark"] & {
    color: map-get($colors-dark, $key);
  }
}

@mixin border($width, $color: 1px) {
  border: $width solid $color;
}

@mixin shadow($shadows...) {
  box-shadow: $shadows;
}

@mixin box-shadow($size, $key) {
  box-shadow: $size map-get($colors-light, $key);
  [data-theme="dark"] & {
    box-shadow: $size map-get($colors-dark, $key);
  }
}

• mixin很强大可以提高代码的复用率，比较灵活，也可以传参数，这里我就不多赘述，官方文档写的很浅显了sass文档，后面会通过@include去调用@mixin。
  这里说一下，这个map-get，是不是有种熟悉的感觉，看起来像js啊，这个sass写起来就是在写js，叫sassscript，map-get函数用于查找键值，mixin传的$key就是所需要的键值，我们就能拿到对应的主题的色值。
  接下来，在home.vue里写了一个自定义属性data-theme，用来区分主题，

这个自定义属性data-theme，对应@mixin里面的[data-theme=“dark”]，默认theme是‘light’。
最后，home.scss里可以写一些页面的页面的样式属性了，当然别忘了引入common.scss，（@import “~@/views/common.scss”），通过@include去调用mixin，获得不同主题所需要的色值。

@import "~@/views/common.scss";

.home {
  min-height: 100%;
  display: flex;
  flex-direction: column;

  .main {
    overflow-y: auto;
  }
}

.content-wrapper {
  @include bg-color(bg-main-content);
}

.v-header {
  @include bg-color(bg-header);

  border-bottom-color: transparent;
  z-index: 2;
  transition: 0.3s;
  color: white;

  .title-wrapper {
    height: 80px;

    .title {
      @include text-color(text-title);

      font-size: 30px;
      font-weight: bold;
    }
  }

  .menu-box {
    .menu {
      @include text-color(text-menu);

      display: inline-block;
      width: 60px;
      height: 25px;
      line-height: 25px;
      text-decoration: none;
      border: 1px solid #1f8fd9;
      cursor: pointer;

      &:first-child {
        border-radius: 2px 0 0 2px;
        border-right: none;
      }

      &:last-child {
        border-radius: 0 2px 2px 0;
        border-left: none;
      }
    }

    .router-link-active {
      background: #1f8fd9;
      color: #ffffff;
    }
  }

  .operation-box {
    .logout {
      @include text-color(text-logout);
    }
  }
}

贴一个css调试的图
至此，这个主题换肤到这里就结束了，写的不好的地方，欢迎大家提建议。