前言

大家都听说过变量，我们学习的任何语言都有变量的存在。

css中是否也存在变量呢？

也许很多小伙伴也是通过less,scss中来使用css变量

其实在css中也是有变量的，今天我们也来学习一下。

为什么要使用变量

变量有一个很大的作用就是降低维护成本。

不仅如此，还可以提高我们的开发效率。

实现改一个，而改全部。是不是爽歪歪。

使用变量的优势：

假如我们确定了项目的主题色，

然后在各个 CSS 代码中使用该了主题色，

如果后期主题色变了，那岂不是所有 CSS 代码都得更改一遍。

这样的话累死我们呀！

假如我们用变量将该主题色存储起来，

后续 CSS 代码中直接使用变量即可，

需要更改主题色时，直接更改变量值即可。

自定义属性[css变量]的简单介绍

自定义属性（有时候也被称作 CSS 变量或者级联变量）是由 CSS 作者定义的。

它包含的值可以在整个文档中重复使用。

css的自定义属性[css变量]是有要求的，需要以--开头。

声明变量： --main-color: black; // css变量的自定义属性是有要求的需要以--开头。

由 var() 函数来获取值比如：color: var(--main-color);

变量的使用

<head>

  <style>

    :root {

      --bgColor: rgb(9, 246, 246);

    }

    div {

      /* 上下面的代码等价于 background-color:rgb(9, 246, 246) */

      background-color: var(--bgColor);

      width: 100px;

      height: 100px;

    }

  </style>

</head>

<body>

    <div></div>

</body>

对上面代码的分析 ：root

上段代码中我们定义了一个 bgColor 变量，

需要注意的是我们需要在自定义属性前面加上--才算是变量，

这算是 CSS 变量的声明规则。

自定义属性值 rgb(9, 246, 246) 就是我们的变量值。

上面的:root 是一个伪类，它相当于一个全局作用域。

我们都知道变量是有作用域的概念的。

声明在:root 伪类中的变量可以在全局 CSS 代码中使用。

简单点说：如果要声明全局所有元素都能使用的话，可以设置到根伪类:root下：

:root {

    --bgColor: rgb(9, 246, 246);

}

变量命名规则

不能包含 $,[,^,(,%等字符

普通字符局限在只要是 “数字[0-9]” “字母[a-zA-Z]” “下划线_” 和 “短横线-” 这些组合

可以是中文，日文或者韩文

变量值只能用作属性值，不能用作属性名，比如下方代码我们是不允许的：

特别需要注意的是【变量名】必须以 “--”开头哈

.foo {

  --side: margin-top;

  /* 无效 */

  var(--side): 20px;

}

5.换肤原理

<head>

    <style>

         :root {

            --theme: yellow;

        }

        .box {

            width: 100px;

            height: 100px;

            background-color: var(--theme);

        }

    </style>

</head>

<body>

    <div class="box" id="contShow"></div>

    <button id="btn1">切换黑色主题</button>

    <button id="btn2">切换黄色主题</button>

</body>

<script>

    let box = document.getElementById('contShow')

    let btn1 = document.getElementById('btn1');

    let btn2 = document.getElementById('btn2');

    btn1.addEventListener('click', () => {

        box.style.setProperty('--theme', '#000');

    })

    btn2.addEventListener('click', () => {

        box.style.setProperty('--theme', 'yellow');

    })

</script>

发现问题

我们都知道，在实际的过程中不可能只会有这么一个颜色。

https://varlet.gitee.io/varlet-ui/#/zh-CN/row

可以参考一下这个换肤效果。如果有时间这周写一个简单的切换皮肤的demo效果

css中也可以使用变量了？的更多相关文章

  1. CSS/CSS3中的原生变量var详解以及布局响应式网页扩展

    使用语法 首先我们先来看一个例子:html代码: <div class="element">这是一段文字</div> css代码: .element { w ...

  2. 原生css 中变量的使用

    前两天看到阮大神的一篇在css中使用变量的文章,整理了一下. 这个重要的 CSS 新功能,所有主要浏览器已经都支持了.本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大. 一.变量的声明 ...

  3. 在原生CSS中使用变量

    本文首发于我的博客 一直以来,CSS作为一种申明式的样式标记语言,很难像如javascript等命令式编程语言一样通过定义和使用变量的方式来维护和追踪某些状态.后来随着scss,less等CSS预处理 ...

  4. 如何在CSS中使用变量

    前言 CSS变量(官方称为自定义属性)是用户定义的值,它可以在你的代码库中设置一次并多次使用.它们使管理颜色.字体.大小和动画值变得更加容易,并确保整个web应用的一致性. 举个例子,你可以将品牌颜色 ...

  5. css中定义变量

    css中定义变量 定义变量可分多种情况: 1.定义全局变量 :root { --borderColor: #ccc;} 2.定义某元素下的变量 .look{ --borderColor: #ccc;} ...

  6. 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局，CSS3+SASS完美版)

    实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法: 1.使用CSS3中的Flex布局 对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置fle ...

  7. flask模板应用-javaScript和CSS中jinja2

    当程序逐渐变大时,很多时候我们需要在javaScript和CSS代码中使用jinja2提供的变量值,甚至是控制语句.比如,通过传入模板的theme_color变量来为页面设置主题色彩,或是根据用户是否 ...

  8. Asp.Net Core 中的环境变量

    Asp.Net Core 中的环境变量 软件开发环境在大多数软件开发组织中,我们通常具有以下开发环境. 开发环境--Development 演示(模拟.临时)环境--Staging 生产环境-- Pr ...

  9. CSS中@support的用法 及其calc、media用法

    背景: 一次偶然的机会遇到一个朋友在刷css的库其中有这样一道题(css变量如何定义,calc, support, media),我看一眼熟悉而陌生,知其一而不知其二,叔可忍婶不可忍,马上就度娘起来, ...

  10. 为什么CSS中的calc函数可能会不生效？

    前言 在早期如果想要对某一些样式进行动态计算,绝大多数的做法都是使用JavaScript来进行,当时的CSS在面对这种场景显得有点无能为力.但是,当CSS3中新增了calc函数时,面对这种场景,Jav ...

随机推荐

  1. 如何把ipa文件(iOS安装包)安装到iPhone手机上? 附方法汇总

    ​ 苹果APP安装包ipa如何安装在手机上?使用过苹果手机的人应该深有感触,那就是苹果APP安装要比安卓APP安装复杂.困难很多,很多人不知道怎么把ipa文件安装到手机上,所以很多苹果用户还会选择越狱 ...

  2. 看火山引擎DataLeap如何做好电商治理（一）：挑战与痛点

    现在人们的日常生活中,网购已经成为人们生活中不可或缺的购物形式.根据中国电子商会发布的<中国社交电商行业发展白皮书(2022)>的数据显示,2022年社交电商市场交易规模达到28542.8 ...

  3. QA: Solon 出现中文乱码怎么办？

    有些服务器可能会出现中文乱码,有些又不会.也是挺晕的. 可以用 jvm 启动参数试一下: java -Dfile.encoding=utf-8 -jar demoapp.jar

  4. module 'numpy' has no attribute 'int'.

    原因:np.int 在 NumPy 1.20 中已弃用,在 NumPy 1.24 中已删除 AttributeError: module 'numpy' has no attribute 'int'. ...

  5. Python 合并多张图片至一张图片

    PDF 有多页,一次性转成JPG 图片,JAVA 报内存溢出, 现改为,每一页存成一张图片,然后再将多张图片合成一张图片. 安装库 pip3 install Image -i https://pypi ...

  6. Blazor实现菜单动画

    想到动画,你可能会去安装Blazor的动画组件BlazorAnimate,然后使用它.本人初学,暂时我也不知道原理,先不用组件,自己实现吧.虽然项目中我用了AntDesignBlazor,但是我忘了使 ...

  7. 深挖 Python 元组 pt.2

    哈喽大家好,我是咸鱼 在<深挖 Python 元组 pt.1>中我们了解 Python 元组的一些概念(索引和切片等),以及如何创建元组,最重要的是我们还介绍了元组的不可变特性 那么今天我 ...

  8. #1241： Oil Deposits（八向搜索 + 并查集）

    Oil Deposits Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...

  9. HDU 4027 Can you answer these queries?(线段树 区间不等更新)

    https://vjudge.net/problem/HDU-4027#author=SUDA2019 题意 输入n个数 然后有两种操作 输入0时将给定区间所有数都变为自己的开方 输入1输出给定区间所 ...

  10. vue学习笔记 五、创建子组件实例

    系列导航 vue学习笔记 一.环境搭建 vue学习笔记 二.环境搭建+项目创建 vue学习笔记 三.文件和目录结构 vue学习笔记 四.定义组件(组件基本结构) vue学习笔记 五.创建子组件实例 v ...