什么是 CSS 变量

CSS变量的两种形式：

  • 自定义属性

    这些属性使用--name的特殊格式作为名字。例如--example: 20px即是一个 css 声明语句。意思是将 20px 赋值给--example变量。
  • 变量

    变量就是拥有合法标识符和合法的值,可以被使用在任意的地方。通过var()函数使用变量。例如：var(--example)会返回--example所对应的值

补充

  • :root 是CSS伪类，匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。 所以我们一般把自定义属性写在:root{}里面，html标签里面的元素会继承它。
  • CSS 自定义属性是可以级联的：每一个自定义属性可以多次出现，并且变量的值将会借助级联算法和自定义属性值运算出来。
  • CSS 变量并不支持 !important 声明，注意只是声明。
  • 没有CSS变量这一说，请描述为CSS自定义属性。

声明变量

我们先写一个demo

<body>

  <section id="container">

    <div class="item1"></div>

    <div class="item2"></div>

    <div class="item3"></div>

    <div class="item4"></div>

  </section>

</body>


#container {

  width: 400px;

  height: 150px;

  background-color: #ffeead;

  border: 1px solid #666;

  display: flex;

  flex-direction: row;

  justify-content: space-around;

  align-items: center;

}

#container > div {

  width: 70px;

  height: 50px;

}

#container div:nth-child(2n) {

  background-color: lightgreen;

}

#container div:nth-child(2n+1) {

  background-color: lightpink;

}



接下来使用css变量，修改部分代码

:root {

  --green: lightgreen;

  --lightpink: lightpink;

}

#container div:nth-child(2n) {

  background-color: var(--green);

}

#container div:nth-child(2n+1) {

  background-color: var(--lightpink);

}

实现了相同的效果。

CSS 变量的继承

<div class="one">

  <div class="two">

    <div class="three"></div>

    <div class="four"></div>

    <div></div>

  </div>

</div>


.one {

  font-size: var(--font-size)

}

.two {

  --font-size: 12px;

  font-size: var(--font-size)

}

.three {

  --font-size: 14px;

  font-size: var(--font-size)

}

.four {

  font-size: var(--font-size)

}

在这个例子中：

  • class="two" 对应的节点字体大小为12px
  • class="three" 对应的节点字体大小为14px
  • class="four" 对应的节点字体大小为12px (继承了父节点)
  • class="one" 对应的节点字体大小为无效值, 即此属性值为未被自定义

CSS 层级变量

CSS-变量的更多相关文章

  1. 引人瞩目的 CSS 变量（CSS Variable）

    这是一个令人激动的革新. CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量. 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变 ...

  2. 第一个CSS变量：currentColor

    一.基本介绍 CSS变量正慢慢地从最初的草案到浏览器实现.但规范中有个已经存在多年的变量:currentColor.这个CSS特性具有良好的浏览器支持和一些实际的应用,本篇文章,我们来学习和了解它. ...

  3. CSS变量variable

    前面的话 一直以来,CSS中是没有变量而言的,要使用 CSS 变量,只能借助 SASS 或者 LESS 这类预编译器.新的草案发布之后,直接在 CSS 中定义和使用变量不再是幻想了.本文将详细介绍CS ...

  4. css变量

    CSS变量: 目前主流浏览器都已支持CSS变量,Edge 浏览器也支持 CSS 变量.用户可以方便地在css中使用自定义变量. <!DOCTYPE html> <html lang= ...

  5. 【译】巧用CSS变量实现自动前缀

    转:https://www.h5jun.com/post/autoprefixing-with-css-variables-lea-verou.html 最近,当我在制作 markapp.io 这个小 ...

  6. css变量的用法——(--cssName)

    CSS变量,又称——CSS自定义属性,现在很多CSS预处理/后处理程序已作了相关快捷的编译处理, 基本用法有哪些呢,我们先看一个简单的栗子:——要求,创建一个五个块元素居中的分栏样式,奇数和偶数同高不 ...

  7. CSS变量（自定义属性）实践指南

    本文翻译自:https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 转载请注明出处:葡萄城官网,葡萄城为开 ...

  8. 实现响应式——CSS变量

    CSS 变量是 CSS 引入的一个新特性,目前绝大多数浏览器已经支持了,它可以帮助我们用更少的代码写出同样多的样式,大大提高了工作效率,本篇文章将教你如何使用 CSS 变量(css variable) ...

  9. 初次接触CSS变量

    本文的目的主要是展示CSS变量是如何工作的.随着Web应用程序变得越来越大,CSS变得越来越大,越来越多,而且很多时候都很乱,在良好的上下文中使用CSS变量,为您提供重用和轻松更改重复出现的CSS属性 ...

  10. 原生CSS设置网站主题色—CSS变量赋值

    定义CSS变量 在css文件顶部定义css变量,注意必须以--开头,使用:root包括这几个变量 :root { --main-bg-color: #ff7675; --color1: #fbfee9 ...

随机推荐

  1. Confluence 6 查看内容索引概要

    内容索引,通常也被称为查找索引,这个索引被用来在 Confluence 中支持查找.这个索引同时也被其他的一些功能使用,例如在归档邮件中构建邮件主题,View Space Activity 的特性和将 ...

  2. Jquery如何获取iframe里面body的html呢？

    如果是自己网页的话,可以这样,$("iframe").contents().find("body").html();意思是,获取iframe里面页面body的内 ...

  3. LeetCode（105）：从前序与中序遍历序列构造二叉树

    Medium! 题目描述: 根据一棵树的前序遍历与中序遍历构造二叉树. 注意:你可以假设树中没有重复的元素. 例如,给出 前序遍历 preorder = [3,9,20,15,7] 中序遍历 inor ...

  4. bzoj 3529

    非常好的一道莫比乌斯反演题,对提升自己的能力有很大帮助. 首先我们分析一下题意:题意让我们求,其中 那么我们首先对后面的式子进行一下变形,变形过程详见https://blog.csdn.net/lle ...

  5. CF508E

    贪心题是很有趣的... 首先,本题为括号匹配问题,那么可以考虑进行栈模拟 然后,我们思考一下如何匹配:虽然题目中仅对右括号的位置提出了区域性要求,但可以发现,对能匹配上的栈顶括号立刻进行匹配一定是一种 ...

  6. JMeter 如何把上一个请求的结果作为下一个请求的参数 —— 使用正则提取器

    有这样一个压力测试环境,有一个上传页面,上传成功之后服务器会返回一些上传信息(比如文件的 id 或者保存路径之类的信息),然后压力机会继续下一个请求,比如调整 id 为 xx 的文件的一些信息等等.问 ...

  7. 【第一部分】01Leetcode刷题

    一.二叉树的中序遍历 题目:94. 二叉树的中序遍历.94. Binary Tree Inorder Traversal 解法一: class Solution { public: vector< ...

  8. 小程序报错：request:fail错误（含https解决方案）（真机预览问题）

    问题描述:域名已经备案,我全部都有,也在后台配置了,但是手机预览,还是请求失败, PC端是可以请求数据出来的 新版开发者工具增加了https检查功能:可使用此功能直接本地避开ssl协议版本检查,但是此 ...

  9. 宿主进程 [*.vshost.exe] & [*.vshost.exe.config]

    宿主进程 [*.vshost.exe] & [*.vshost.exe.config] pdb文件: 英文全称:Program Database File 中文全称:程序数据库 文件 Debu ...

  10. Hadoop数据分析平台项目实战(基于CDH版本集群部署与安装)

    1.Hadoop的主要应用场景: a.数据分析平台. b.推荐系统. c.业务系统的底层存储系统. d.业务监控系统. 2.开发环境:Linux集群(Centos64位)+Window开发模式(win ...