前言

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

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. 你知道，什么时候用Vue计算属性吗？

    摘要:当我们处理复杂逻辑时,都应该使用计算属性. 本文分享自华为云社区<深入理解计算属性,知道什么时候该用Vue计算属性吗?>,作者: 前端老实人 . 计算属性 有些时候,我们在模板中放入 ...

  2. storybook 编写stories的story基础语法

    编写 stories story 用于展示组件某个状态,每个组件可以包含任意多个 story,用来测试组件的各种场景.根据默认配置,只需要在组件的文件夹中,以 **.component.stories ...

  3. 【主流技术】聊一聊 Redis 的基本结构和简单应用（一）

    目录 前言 一.String 类型 二.List 类型 三.Hash 类型 四.Set 结构 五.Sort Set (Zset)结构 六.文章小结 前言 Redis 是目前互联网后端的热门中间件之一, ...

  4. [JAVA基础]后端原理

    后端原理 [[网站架构]5分钟了解后端工作原理.为什么Tomcat长时间运行会崩溃?高并发线程池怎么设置?] https://www.bilibili.com/video/BV1PB4y11795/? ...

  5. 生成学习全景：从基础理论到GANs技术实战

    本文全面探讨了生成学习的理论与实践,包括对生成学习与判别学习的比较.详细解析GANs.VAEs及自回归模型的工作原理与结构,并通过实战案例展示了GAN模型在PyTorch中的实现. 关注TechLea ...

  6. #5702：Solving Order（结构体排序，水题）

    原题目链接 题目大意:把颜色由多到少进行排序,从大到小的输出. 解题思路:将变量存在结构体中,然后结构体排序即可.还需要注意格式的问题. 详见代码. #include <iostream> ...

  7. Mynavi Programming Contest 2021（AtCoder Beginner Contest 201）A ~ E题题解

    A - Tiny Arithmetic Sequence 水题,判断3个数是否能构成等差数列 void solve() { int a, b, c; cin >> a >> b ...

  8. freeswitch的任务引擎问题与解决方案

    概述 freeswitch核心框架中有一个定时任务系统task,在开发过程中用来做一些延时操作和异步操作很方便. 我们在VOIP的呼叫流程中,经常会有一些对实时性要求没那么高的操作,或者会有阻塞流程的 ...

  9. 面试官：Redis持久化能关吗？怎么关？

    数据持久化是指将数据从内存中,保存到磁盘或其他持久存储介质的过程,这样做的目的是为了保证数据不丢失. 而 Redis 的持久化功能默认是开启的,这样做的目的也是为了保证程序的稳定性(防止缓存雪崩.缓存 ...

  10. Shell-函数-function