美文网首页
Vue项目切换主题(Sass)

Vue项目切换主题(Sass)

作者: Reclame | 来源:发表于2020-03-31 11:06 被阅读0次

1.首先在sass文件定义变量

$themes:(
    default :(
        color1: #fff,
        color2: red
    ),
    light:(
        color1: #eee, 
        color2: yellow
    )
)

2.定义好2种颜色值之后,我们需要使用@mixin函数就行封装

//function(name, value){  } 一个意思,参数来的
@mixin setColor($name, $value) {
  //$th1是表示 key值,相当于default跟light,$th2表示color1,color2
  @each $th1 $th2 in $themes {
    //@at-root表示全局样式,$th1就是default跟light,最后编译成#app.them_default,#app.them_ light ;
    @at-root #app.them_#{$th1} & {
      @content;  
       @if $name == bor {
          border-color: map-get($map: $th2, $key: $value);
        } @else-if $name == t {
          color: map-get($map: $th2, $key: $value); 
        } @else-if $name == bg {
          background-color: map-get($map: $th2, $key: $value);
        }
      }
   }
 }

3.全局导入文件里面

.div{
  @include  setColor(bor, color1); 
  // @include  setColor(t, color1); 
  // @include  setColor(bg, color1); 
}
编译成
#app.them_default  .div{
    border-color: #fff;
}
#app.them_light  .div{    
    border-color: #eee;
}

这样就能达到主题切换了

相关文章

  • Vue项目切换主题(Sass)

    1.首先在sass文件定义变量 2.定义好2种颜色值之后,我们需要使用@mixin函数就行封装 3.全局导入文件里...

  • Vue 使用 sass 完成 主题切换

    一、项目中创建 themes.scss 用来定义全局的颜色 $themes:( // 日间默认 如 font_co...

  • Vue项目动态主题切换

    Vue项目动态主题切换 通常情况下,很多后台管理界面需要有好几套颜色的主题,我们的Vue项目已经集成了Elemen...

  • vue2.0项目中引入sass、less

    一、vue2.0项目中引入sass预编译 (1)安装依赖 vue项目中想要使用sass,需要安装上node-sas...

  • VUE项目中使用SCSS

    VUE项目中使用SCSS sass是依赖于node-sass ,所以要安装node-sass sass-loade...

  • 前端(9)vue安装sass

    一、创建vue项目 二、安装sass 三、node-sass版本和sass-loader版本对应 nodenode...

  • vue-cli开发记录

    1.项目架构 项目使用到的技术vue-cli + vue-echarts + sass + axios 2.项目搭...

  • 2019-01-19

    Vue+Vuex+axios+sass项目: 抽空整理了一下使用vue-cli创建vue项目并在项目中使用Vuex...

  • Vue-cli3.x H5项目的一些配置

    1、如何进行sass配置及操作 创建好vue-cli3.x创建好后;新建一个Vue项目;在该项目中使用sass需要...

  • vue 项目常用加载器及配置

    vue 项目常用加载器及配置 1.安装sass: 1.1 由于sass-loader依赖于node-sass,所以...

网友评论

      本文标题:Vue项目切换主题(Sass)

      本文链接:https://www.haomeiwen.com/subject/zfwiuhtx.html