CSS-变量
什么是 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"对应的节点字体大小为12pxclass="three"对应的节点字体大小为14pxclass="four"对应的节点字体大小为12px (继承了父节点)class="one"对应的节点字体大小为无效值, 即此属性值为未被自定义
CSS 层级变量
CSS-变量的更多相关文章
- 引人瞩目的 CSS 变量（CSS Variable）
这是一个令人激动的革新. CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量. 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变 ...
- 第一个CSS变量：currentColor
一.基本介绍 CSS变量正慢慢地从最初的草案到浏览器实现.但规范中有个已经存在多年的变量:currentColor.这个CSS特性具有良好的浏览器支持和一些实际的应用,本篇文章,我们来学习和了解它. ...
- CSS变量variable
前面的话 一直以来,CSS中是没有变量而言的,要使用 CSS 变量,只能借助 SASS 或者 LESS 这类预编译器.新的草案发布之后,直接在 CSS 中定义和使用变量不再是幻想了.本文将详细介绍CS ...
- css变量
CSS变量: 目前主流浏览器都已支持CSS变量,Edge 浏览器也支持 CSS 变量.用户可以方便地在css中使用自定义变量. <!DOCTYPE html> <html lang= ...
- 【译】巧用CSS变量实现自动前缀
转:https://www.h5jun.com/post/autoprefixing-with-css-variables-lea-verou.html 最近,当我在制作 markapp.io 这个小 ...
- css变量的用法——(--cssName)
CSS变量,又称——CSS自定义属性,现在很多CSS预处理/后处理程序已作了相关快捷的编译处理, 基本用法有哪些呢,我们先看一个简单的栗子:——要求,创建一个五个块元素居中的分栏样式,奇数和偶数同高不 ...
- CSS变量（自定义属性）实践指南
本文翻译自:https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 转载请注明出处:葡萄城官网,葡萄城为开 ...
- 实现响应式——CSS变量
CSS 变量是 CSS 引入的一个新特性,目前绝大多数浏览器已经支持了,它可以帮助我们用更少的代码写出同样多的样式,大大提高了工作效率,本篇文章将教你如何使用 CSS 变量(css variable) ...
- 初次接触CSS变量
本文的目的主要是展示CSS变量是如何工作的.随着Web应用程序变得越来越大,CSS变得越来越大,越来越多,而且很多时候都很乱,在良好的上下文中使用CSS变量,为您提供重用和轻松更改重复出现的CSS属性 ...
- 原生CSS设置网站主题色—CSS变量赋值
定义CSS变量 在css文件顶部定义css变量,注意必须以--开头,使用:root包括这几个变量 :root { --main-bg-color: #ff7675; --color1: #fbfee9 ...
随机推荐
- deepin 桌面突然卡死
deepin桌面突然卡死 使用快捷键Ctrl+alt+F2 重启systemctl
- nginx实践(四)之静态资源web服务(防盗链)
防盗链目的 防止资源被盗用 http_refer 主要是判断refer信息,判断请求来源是不是合法身份 语法 实例 参数说明: none表示允许没有代理的头信息过来,blocked表示refer信息不 ...
- 通过$broadcast或$emit在子级和父级controller之间进行值传递
通过$broadcast或$emit在controller之间进行值传递,不过这些controller必须是子级或者父级关系, $emit只能向父级parent controller传递事件event ...
- cf1121d 尺取
尺取,写起来有点麻烦 枚举左端点,然后找到右端点,,使得区间[l,r]里各种颜色花朵的数量满足b数组中各种花朵的数量,然后再judge区间[l,r]截取出后能否可以供剩下的n-1个人做花环 /* 给定 ...
- bzoj 2761
神题... 其实这题巨水,用各种诡异的方法都能A,包括STL等等 我之所以写题解,是因为我发现了一个bug:bz和luogu时限有问题! 这题我用了两种做法: ①:直接使用STL-map(不能直接用数 ...
- Nginx详解二十三：Nginx深度学习篇之Nginx+Lua开发环境搭建
Nginx+Lua开发环境 1.下载LuaJIT解释器wget http://luajit.org/download/LuaJIT-2.0.2.tar.gztar -zxvf LuaJIT-2.0.2 ...
- 饮冰三年-人工智能-linux-03 Linux文件管理（权限管理+归档+压缩）
1:对文件的权限管理 drwxr-xr-x. 最后一个.表示在安全情况下创建的.selinux a: d表示目录:-表示普通文件:l表示快捷方式:b设备文件 b:- 属主的权限 r:读权限:w:写权限 ...
- B: Ocean的游戏(前缀和)
B: Ocean的游戏 Time Limit: 1 s Memory Limit: 128 MB Submit My Status Problem Description 给定一个字符串s, ...
- 一脸懵逼学习Zookeeper（动物园管理员）---》高度可靠的分布式协调服务
1:Zookeeper是一个分布式协调服务:就是为用户的分布式应用程序提供协调服务 A.zookeeper是为别的分布式程序服务的 B.Zookeeper本身就是一个分布式程序(只要有半数以上节点存活 ...
- js高级程序设计
defer 异步脚本,脚本延迟到文档完全被解析和显示之后再执行.只对外部脚本文件有效.按顺序执行脚本.但在实际情况下,并不一定会按照顺序执行最好只有一个延迟脚本.支持H5的浏览器会忽略给脚本设置 de ...