前言

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

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实现上传图片效果

    摘要:在逛b站时看到一个上传图片的效果,想着可以自己也做一个,因为原作者是用原生js写的,那我不如就用vue写好了,当然,是一个很小的东西,在HTML文件直接引用vue就好了,详细步骤如下~ 本文分享 ...

  2. Solon cloud 使用融断器 sentinel 或 guava 或 semaphore

    Solon Cloud 是一套防腐层的架构方案.提供统一的接口定义和配置设计,从而实现不同框架统一体验的效果. 目前,已适配的融断器有三个插件且体验方式完全相同,分别是: sentinel-solon ...

  3. Linux系统用户态和内核态

    Unix/Linux的体系架构 如上图所示,从宏观上来看,Linux操作系统的体系架构分为用户态和内核态(或者用户空间和内核空间).内核从本质上看是一种软件-----控制计算机的硬件资源,并提供上层应 ...

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

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

  5. Codeforces Round #719 (Div. 3) A~E题解

    51鸽了几天,有几场比赛的题解还没发布,今天晚上会补上的 1520A. Do Not Be Distracted! 问题分析 模拟,如果存在已经出现的连续字母段则输出NO using ll = lon ...

  6. 拥抱开放，Serverless 时代的下一征程

    Serverless 作为云计算的最佳实践和未来演进趋势,其全托管免运维的使用体验和按量付费的成本优势使得它在云原生时代备受推崇.Serverless 的使用场景也由事件驱动,数据处理等部分特定场景转 ...

  7. iview 将Modal抽取成组件并控制Modal的显示隐藏

    开发中遇到Modal弹出框的内容太多,就想把Modal单独分装成一个组件,但是发现封装成组件后Modal的关闭和打开有问题.如下方法可以解决这个问题. 父级页面: <PriceInfodModa ...

  8. <vue 组件 1、组件化基本使用>

    代码结构 组件就是将复杂的功能拆分成简单的块,拆分后的块可以被多处使用. 组件的使用分成三个步骤: 1.创建组件构造器     Vue.extend() 2.注册组件               Vu ...

  9. vue-li3结合vantUI框架实现国际化语言切换

    vue-cli3结合vantUI框架实现国际化语言切换 https://blog.csdn.net/weixin_45045199/article/details/105838517?utm_medi ...

  10. C# 排序算法2：选择排序

    选择排序法 ,是在要排序的一组数中,选出最小(或最大)的一个数与第一个位置的数交换:在剩下的数当中找最小的与第二个位置的数交换,即顺序放在已排好序的数列的最后,如此循环,直到全部数据元素排完为止. 原 ...