一般在开发中 有时候会遇见动态修改 一些其他组件的时候 这时候需要使用scss var的方法来动态改变
1.在 本页面的css 定义一个var 变量
$mapIndex:var(--width,100px) ;
2.在JS /jsx里面使用 就可以改变了
document.getElementsByTagName('body')[0].style.setProperty('--width',500px)
框架选择： create-
react
-app + mobx + webpack5 + antdesign
由于最近公司有多个主题的共存性，所以需要实现线上主题切换的功能，所以本文主要描述的是基于create-
react
-app之上的主题切换。
CSS
切换 有考虑过根据用户选择的主题在切换的时候选择加载页面
css
文件的区分方案，但是考虑到这种形式需要在页面切换的时候去reload，因为htmlDOM是在
css
与JS的结合产物，用户体验不是很好。
Less切换 单纯引入所有的less文件去做切换，这样不能实现
css
的
动态
加载了，会增加无用
css
文件的加载
最后通过比
如上述代码，意思为：在body选择器里面声明了两个
变量
：–foo 和 –bar；
css
声明
变量
不像Less的@foo， 也不像sass的$foo，而是采取了不同形式的–foo，声明出来的
变量
和color、background-url 等正式属性没有什么不同 ，所以
CSS
变量
又叫做**“
CSS
自定义
这是一个有争议的观点，但是我更喜欢
CSS
-in-JS。 ????????
但！ 我也非常喜欢
CSS
。 而且我不认为使用
CSS
-in-JS可以使您不必学习它。 无论哪种方式，您都在编写
CSS
！ 它的包装方式略有不同。
无论您将
CSS
放在何处，都应该掌握该语言。 精通
CSS
将使您成为更有效的前端开发人员。
在本教程中，我们将了解如何利用
CSS
中最令人兴奋的最新开发之一：
CSS
变量
，AKA自定义属性。 我们将看到如...
title: 利用
css
3的
var
()实现运行时
改变
s
css
的
变量
值
tags:
css
,
css
3,
var
(),runtime change,s
css
grammar_cjkRuby: true
create_date: 2018-12-24
var
()介绍与使用
详情(MDN) IE无效,其余主流浏览器有效
var
()使用
只能在{}内声明,作用范围由{}的选择器决定
<!-...
相信大家在开发的过程中肯定也遇见不少根据逻辑来控制页面
样式
问题的需求，又比如我页面很多相同的
样式
值要修改那么又懒得去找js部分的类名 那这时候就需要根据js设置
css
了，故此写下笔记以防忘记。
提示：以下是本篇文章正文内容，下面案例可供参考
简单来说 setProperty方法接受三个值 第一个是你要修改的属性 (必填) 第二个值是你要替换或者更改的新值 (选填) 第三个值是权重值 (选填
import
React
, { Component, Fragment } from '
react
';
import './style.
css
';
class Demo extends Component{
constructor(props) {
super(props);
this.st...
其实我这个写法每个UI库都通用 , 不局限于ElementUI , 看明白思路就知道怎么写了
一键换肤 ,
动态
替换全局主题颜色功能已经实现很久了 , 在项目验收的时候出现了一个小问题 , 想改动一下 , 于是来记录一下
前段时间公司项目里需要实现一键换服 , 换主题颜色 , 网上看了一部分 大多数都是用js获取标签元素添加Attribute , 如document.XXXXXXX ,或者是建theme.
css
文件什么的 , 不太符合我想要实现的用最少的代码实现换肤的功能 , 如果用了框架 , 还
最近，客户又提出新的需求，想要用户可以更改应用的
字体
大小，为了方便年龄较大的使用者有较好的体验。
当我拿到这个需求第一反应是
变量
，然后就是s
css
或less。但是我突然想起之前无意中扫了一眼的文章提到
css
变量
，经过一番学习及实现，嗯，真香，是真的香~
废话不多说，上代码：
<style>
/*
变量
声明*/
:root { // 放在root里可以全局访问
--bigSize: 0.38rem;// 1 头
--midSize:0.376rem;// 2 标题
--minSi
