This website requires JavaScript.

css3 新年皮肤走起

2019.01.15 11:24字数 3251阅读 86喜欢 0评论 0

小孩小孩你别馋,过了腊八就是年。腊八粥你喝几天,哩哩啦啦二十三。二十三,糖瓜粘;二十四,扫房子;二十五,做豆腐;二十六,炸羊肉;二十七,杀公鸡;二十八,把面发;二十九,蒸馒头;三十晚上玩一宿,大年初一扭一扭。

传统换肤,无外乎两种选择
1:写两套样式 js替换css文件链接
2:js 替换具体class样式

而这里说一下新方法,我们都知道css3出了很多新知识点 calc vw vh var...东西太多,学不动,这次改动我主要用到var,所以把它拉出来写一下,这个真是好东西

<style>
.black{
  background-color:#000;
}
.green{
  color:#5ab95c;
}
.white { 
  color:#fff 
}
</style>

<div class="black white">
卧槽
</div>

css3 var原生变量

<style>
:root {
  --black: #000;
  --green: #5ab95c;
  --white: #fff
}
body {
  background-color: var(--white);
  color: var5(--black);
}
div{
  color: var(--green);
}
</style>

从复合样式,到变过渡,再结合sass/less,代码量完全不同了

theme.scss


@mixin theme(
  $theme-white,
  $theme-black,
  $theme-red,
  $theme-primary,
  $theme-green,
  $theme-text,
  $border-color
) {
  --module-bg: rgba($theme-white, 0.6);
  --header-fix-bg: rgba($theme-white, .8);

  --module-hover-bg: rgba($theme-black, .12);
  --module-hover-bg-light-3: lighten(rgba($theme-black, .12), 30%);
  --module-hover-bg-light-6: lighten(rgba($theme-black, .12), 50%);

  --code-bg: darken($theme-white, 3%);

  --theme-white: $theme-white;
  --theme-black: $theme-black;
  --theme-red: $theme-red;
  --theme-primary: $theme-primary;
  --theme-green: $theme-green;

  --theme-red-light-1: lighten($theme-red, 5%);

  --border-color: $border-color;

  --text: $theme-text;
  --text-dividers: lighten($theme-text, 40%);
  --text-disabled: lighten($theme-text, 25%);
  --text-secondary: darken($theme-text, 10%);

  --text-light-4: lighten($theme-text, 40%);
  --text-light-3: lighten($theme-text, 30%);
  --text-light-1: lighten($theme-text, 10%);
  --text-dark-1: darken($theme-text, 10%);
}


body {
  &#light {
    @include theme(
      $theme-white: #fff,
      $theme-black: #24292e,
      $theme-red: #ea6f5a,
      $theme-primary: #20A0FF,
      $theme-green: #5ab95c,
      $border-color: #a7a7a7,
      $theme-text: #222222
    )
  }

  &#dark {
    @include theme(
      $theme-white: #4a4a4a,
      $theme-black: #c8c8c8,
      $theme-red: #ea6f5a,
      $theme-primary: #20A0FF,
      $theme-green: #5ab95c,
      $border-color: #636363,
      $theme-text: #ffffff
    )
  }
}

variable.scss

// color
$white: var(--theme-white);
$black: var(--theme-black);
$green: var(--theme-green);
$gyey: var(--theme-primary);
$red: var(--theme-red);

body {
  padding: 5rem 0 0 0;
  background: $body-bg;
}
....  

defualt.vue

mounted () {
      const theme = window.localStorage.getItem('THEME') || 'light'
      document.body.id = theme
    }

看到这里,好像写完了,其实没有,在build的时候,发现,sass没有编译出来,失败了

1.png
2.png
3.png

我去官网查完发现,只有3.4.25版本可以识别 --,然后再去查找文档,发现 #{}插值可以解决

@mixin theme(
  $theme-white,
  $theme-black,
  $theme-red,
  $theme-primary,
  $theme-green,
  $theme-text,
  $border-color
) {
  --module-bg: rgba(#{$theme-white}, 0.6);
}
...  

但这个方式太变态了,如果每个地方都用插值写,那就失去意义了

然后各种尝试,npm包测试,最终定位到 node-sass#4.7.2,libsass:3.5.0.beta.2 这个版本区间可以不需要插值编译成功

换肤暂告一段落,继续多项目域权限后台系统整理(go,casbin,RABC领域模型),争取出个系列文档