zoukankan      html  css  js  c++  java
  • vuejs 项目中使用@mixin 与 @include 来做主题的切换

    一: 主题切换一般分为 俩种

    1:是我们通过点击页面的主题设置来切换主题

    2:是对外暴露主题的样式表,让其他人可以制定主题并进行切换

    先说第一种的实现

    以vue3.0 为列

    vue 项目中跟目录 下创建vue.config.js 文件, import 导入公共样式

    代码:

    module.exports = {
      css: {
        loaderOptions: {
          sass: {
            prependData: '@import "@/styles/theme/variable/themeVariable.scss","@/styles/theme/mixin/themeMixinBase.scss","@/styles/theme/mixin/themeMixinFlex.scss";',
    
          },
        },
      },
    
    };
    

     开始分析如何实现主题切换

    1:themeMixinBase.scss

    @import "../variable/themeVariable";
    /*除默认主题外,还有几套主题*/
    $themeNum:1;
    /*获取themeVariable中定义的变量的值,参数为变量的名字*/
    @function var($key){
      @return map_get($themeVariable,$key);
    }
    /*生成单个样式的多套主题设置*/
    @mixin oneCssGenerate($prop,$varKey){
      #{$prop}:var(#{$varKey}_theme_default) ;
      @for $i from 1 through $themeNum{
        [theme="#{$i}"] & {
          #{$prop}: var(#{$varKey}_theme_#{$i}) ;
        }
      }
    }
    @mixin border($varKey) {
      border:1px solid var(#{$varKey}_theme_default);
      @for $i from 1 through $themeNum{
        [theme="#{$i}"] & {
          border:1px solid  var(#{$varKey}_theme_#{$i});
        }
      }
    
    }

    2:themeVariable 中用来存放 每个页面的 样式的css

    @import "themeVariableExam";
    @import "themeVariableCommon";
    
    
    @function allVariable(){
      $list:$themeVariableCommon,$themeVariableExam;
      $result:();
      @each  $var in $list{
        $result:map_merge($result,$var);
      }
      @return $result;
    }
    $themeVariable:allVariable()
  • 相关阅读:
    java中将表单转换为PDF
    base64图片
    ORACLE中用户等系统信息操作
    jquery中live is not a function的问题
    完全卸载Oracle11G
    jquery 获取鼠标和元素的坐标点
    JS的多线程
    Oracle和SQLServer解锁杀进程
    JAVA 通过LDAP获取AD域用户及组织信息
    oracle基础语法大全
  • 原文地址:https://www.cnblogs.com/sunliyuan/p/14449120.html
Copyright © 2011-2022 走看看