前言

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

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. 华为云构建云原生DevSecOps平台，保障软件供应链全流程安全可信

    摘要:面临网络安全挑战的大环境下,华为云构筑的云原生DevSecOps平台,打造了创新可控的安全服务,助力企业软件供应链全生命周期安全. 2022年8月13日,"2022中国DevOps社区 ...

  2. 技术架构+应用场景揭秘，为什么高斯Redis比开源香？

    摘要:高斯Redis即保留了开源Redis的能力,同时凭借其存算分离的架构,在成本.稳定性.可靠性.一致性等方面做出了新的突破,也更加适用于当下数据规模庞大的互联网业务. 本文分享自华为云社区< ...

  3. PPT 渐变入门

    光圈 线性渐变 路径渐变 案例 一个圆 渐变 二个圆 渐变叠加 加阴影 阴影 金属字体

  4. Chrome 英文翻译插件，沙拉查词

    下载: https://pan.baidu.com/s/1VRaZzKgyPKc0Qt6Gufk3yw 提取码: chbm 下载: https://pan.baidu.com/s/1VRaZzKgyP ...

  5. protobuf安装、编译和使用

    protobuf使用简单示例 一.安装 首先下载protobuf的安装包,我这里使用的是protobuf-cpp-3.21.5.tar.gz 解压安装包 tar -xzf protobuf-cpp-3 ...

  6. 【HZERO】分支管理

    分支管理 分支类型 feature-[任务编号]-简单描述: 任务开发分支,针对迭代子任务建立的开发分支 bugfix :修复分支,用于缺陷修复. develop:开发分支,所有开发人员都可以提交代码 ...

  7. C 与 C++ 区别

    C 与 C++ 区别 本文介绍 C 与 C++ 之间重要的或者容易忽略的区别.尽管 C++ 几乎是 C 的超集,C/C++ 代码混用一般也没什么问题,但是了解 C/C++ 间比较重要区别可以避免碰到一 ...

  8. [网络克隆]利用tiny proxy实现局域网内批量安装WINDOWS操作系统。

    说明:本文支持UEFI及BIOS系统克隆.支持UEFI及BIOS网络引导,适用于新旧几乎所有支持网络启动的电脑. 事前准备: 保证被克隆的电脑为同一配置,或者各硬件差异不大,比如CPU同如英特尔8代的 ...

  9. uniapp H5扫码解决方案

    JS通过webView调用本地相机扫码二维码,然后webView把二维码数据传给JS 网上找了一堆资料,都是JS传值给webView的,这里自己看了下代码,通过两个步骤实现此功能1,通过JS调用web ...

  10. java项目实践-jsp-filter-监听器-day19

    目录 1. jsp 2. 过滤器 3. listener 监听器 1. jsp servle逻辑处理方便 html页面表现麻烦 jsp 页面表现方便 但是逻辑处理麻烦 JSP 是一种页面技术 JSP本 ...