css设置公用颜色–color，css中的引用方法var(–color)。
根据 root.setAttribute(‘style’, ‘–color: #e74c3c’) 可修改–color的参数。
例子如下：
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Title</title>
<style>
:root {
--color: #7f8c8d;
--spacing: 20px;
div.colors{
height: 100px;
width: 100px;
background-color: var(--color);
padding: var(--spacing);
</style>
</head>
<div class="colors">
<div class="actions">
<a class="red">div红色</a>
<a class="blue">div蓝色</a>
</body>
<script>
var btnColorRed = document.querySelector('.red');
var btnColorBlue = document.querySelector('.blue');
var root = document.querySelector(':root');
btnColorRed.addEventListener('click', function() {
root.setAttribute('style', '--color: #e74c3c');
btnColorBlue.addEventListener('click', function() {
root.setAttribute('style', '--color: #3498db');
</script>
</html>
css设置公用颜色–color，css中的引用方法var(–color)。根据 root.setAttribute(‘style’, ‘–color: #e74c3c’) 可修改–color的参数。例子如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
根据预设的配色方案，在前端实现动态切换系统主题颜色。
大概的思路就是给html根标签设置一个data-theme属性，然后通过js切换data-theme的属性值，Scss根据此属性来判断使用对应主题变量。这里可以选择持久化Vux或接口来保存用户选择的主题。
一、首先需要给项目下载配置Scss
1.安装依赖
npm install node-sass sass-loader --save-dev
2.找到build中webpack.base.conf.js,在rules中添加scss规则
test: /\.scss$/,
loaders: ['style', 'css', 'sass
在网页开发中，我们通常使用
CSS来设置网页的样式。但是，在开发过程中，有时候我们需要根据不同的条件来
动态修改样式，这时候就需要使用JavaScript来实现。在
CSS中，有一种
变量的概念，可以使用
变量来定义
颜色、字体大小等样式属性。在本篇文章中，我们将介绍如何使用JavaScript来修改
CSS变量，从而
动态地修改样式。案例演示：
我们假设有一个按钮，当点击按钮时，将
改变页面中所有段落的背景
颜色。首先，我们需要在
CSS中定义一个
变量，用来表示背景
颜色。在本例中，我们将
变量名定义为–bg-
color。
在这里记录一下开发过程中突然喜欢上的
CSS/
CSS3
var()
变量以及calc()函数 , 让在不使用sass以及less的情况下也能进行一个比较高效的样式设置
var()
变量
var变量的定义语法 : - -
变量名 两个短横线加上
变量名
var变量的使用 :
var(- -
变量名)
我们可以在body中或者任何一个我们想要使用的
变量语法的层级中定义
var()
变量并进行使用
例如在body中定义:
body{
--fontSize: 18px;
--
color: #000000;
CSS中的
变量使用——
var() 函数用于
动态改变颜色
css设置
公用颜色–-
color，
css中的
引用方法
var(–
color)。
根据 root.setAttribute('style', '–
color: #e74c3c') 可修改–
color的参数。
IE要加上
css-
vars-ponyfill
<template>
<div id="div1">
var() 函数——
动态改变css样式</div>
</template>
<style
padding-left:1.5em;font-size:12px;height:23px;line-height:23px;
color:gray;text-decoration:none;
a:link,a:visited{
background:url(/article/upimages/bbs_bg_off.gif);
a:hover,a:active{
background:ur
1.首先在目录“src/assets”下新建两个文件：“base.css”（基本样式）和“config.css”（颜色变量存放位置，方便随时修改主题色）。
2.config.css文件中，定义变量如：
/*主题色*/
$themeColor:#45b795;
$borderColor: #EEE;
// 背景色
$bgColor:#FAFAFAFA;
// 按钮
$btn-red:#ef5728;
3.base.css（基本样式），引入如下：
@import "./config.css";
}:root伪类可以看做是一个全局作用域，在里面声明的变量，他下面的所有选择器都可以拿到body {
color : var(--color);
color : var(--Color);
}使用自定义属性来设置变量名，并使用特定的 ...
vue2中，应用实例-
CSS中的
变量使用——
var() 函数用于
动态改变颜色 & 全局样式详情版
第一步：定义
css文件
src/assets/
css/main.
css
margin: 0;
padding: 0;
:root {
--
color-gray: #5e6d82;
--
color-light: #a1dbf5;
第二步：在App.vue中进行引入
src/App.vue
<template>
<div id="app" ele
css 变量是一种特殊的值，可以在 css 中使用，它可以帮助我们更加方便地维护和管理 css 代码。
在使用 css 变量时，需要先在 css 代码中声明变量。声明变量的方式是：
```css
:root {
--变量名: 变量值;
在上面的代码中，`:root` 表示根元素，即 html 元素。这意味着这个变量在整个文档中都可以使用。
例如，如果我们想要声明一个名为 `primary-color` 的变量，其值为红色，那么我们可以这样写：
```css
:root {
--primary-color: red;
然后就可以在 css 代码中使用这个变量了。使用变量的方式是：
```css
元素选择器 {
属性: var(--变量名);
例如，如果我们想要将所有段落的文字颜色设置为 `primary-color` 变量的值，即红色，可以这样写：
```css
color: var(--primary-color);
注意，如果在使用变量时变量没有被声明，或者变量声明了但没有赋值，那么这个变量的值就是 `none`。
css 变量还可以有默认值，即在声明变量时可以给变量提供一个默认值。如果在使用
