前言

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

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. 重磅！KubeEdge单集群突破10万边缘节点|云原生边缘计算峰会前瞻

    摘要:<KubeEdge单集群突破10万边缘节点 | 技术报告>将会在6月25日即将开展的云原生边缘计算峰会(KubeEdge Summit 2022)中进行应用解析.我们先来一睹为快吧! ...

  2. 论文解读丨LayoutLM: 面向文档理解的文本与版面预训练

    摘要:LayoutLM模型利用大规模无标注文档数据集进行文本与版面的联合预训练,在多个下游的文档理解任务上取得了领先的结果. 本文分享自华为云社区<论文解读系列二十五:LayoutLM: 面向文 ...

  3. OGC标准WMTS服务概念与地图商的瓦片编号流派-web地图切片加载

    还不知道地图栅格化切片等相关GIS原理的,推荐阅读<webGIS底图栅格化与实时数据合成处理原理,地图API设计,xyz加载> OGC概念 OGC全称--开放地理空间信息联盟(Open G ...

  4. npm 新型定时攻击或导致软件供应链安全风险

    原标题: New npm timing attack could lead to supply chain attacks 原文链接: https://www.bleepingcomputer.com ...

  5. BBS项目(二)：首页导航条搭建 修改密码功能 首页数据展示 个人站点页面

    目录 首页导航条搭建 session判断用户是否登录 更换验证码 导航条更多功能 退出系统 修改密码前端页面 使用大模态框 编写模态框 前端表单编写 修改密码后端逻辑 接受参数 验证参数 修改密码 首 ...

  6. SpringCloud Alibaba技术栈（二）Nacos服务治理

    源码-笔记:Code for Github 第二章 Nacos服务治理 1. 模块设计与实现 ①首先创建maven项目,此项目作为父工程.把src文件夹删掉,修改pom文件,添加依赖版本控制,控制子模 ...

  7. OpenSCA用开源的方式做开源风险治理：Why? What? How?

    随着容器.微服务等新技术的快速迭代,开源软件已成为业界主流形态,开源和云原生时代的到来导致软件供应链越来越趋于复杂化和多样化,网络攻击者开始采用软件供应链攻击作为击破关键基础设施的的重要突破口,从而导 ...

  8. 前端规范：eslint与prettier使用（干货）

    https://blog.csdn.net/weixin_45077178/article/details/107226551 视频教程: https://xdclass.net/#/dplayer? ...

  9. freeswitch的mod_xml_curl模块动态获取configuration

    概述 freeswitch是一款简单好用的VOIP开源软交换平台. mod_xml_curl模块支持从web服务获取xml配置,本文介绍如何动态获取acl配置. 环境 centos:CentOS  r ...

  10. pycharm解决test_开头文件报错的问题

    一.问题描述 运行时报了如下错误: