CSS变量使用解析
很早直接就了解到CSS变量相关的内容,奈何之前使用价值不高(很多主流浏览器不兼容)
最近发现主流浏览器都已经支持了这一变化
这一重要的变化,可能会让你发现,原生CSS从此变的异常强大~,下面看一下如何使用
变量的声明
css的变量声明标识符为:--,即变量名前面加2个连接线
body {
--head_color: #000;
--head_bar: #F7EFD2;
}
上面代码中,body选择器里面声明了两个变量。它与正常的属性定义上没有什么不同,只是没有默认含义,所以其又叫做CSS自定义属性
这里需要注意的是,其变量名对大小写是敏感的。
变量的引用
变量的引用也很简单,它为我们提供了一个方法专门进行引用,var()函数用于读取变量。
.head {
color: var(--head_color);
}
这样就引用了,另外,如果你担心变量没有定义,它还提供了默认值的设置方式。
可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值。
color: var(--head_color, #7F583F);
需要注意的是,变量值只能用作属性值,不能用作属性名。
如果变量值是数值,不能与数值单位直接连用。
.a {
--gap:;
/* 无效 */
margin-top: var(--gap)px;
}
数值与单位直接写在一起,必须使用calc()
函数,将它们连接。
.a{
--gap:;
margin-top: calc(var(--gap) * 1px);
}
作用域
变量只能作用于自身以及后代元素,兄弟元素,祖先元素都不能享用。
所以,如果你的变量是全局享用的,则建议放在:root
上,例如:
:root {
--color: red;
}
当然,也可以使用body或者html标签:
body {
--color: red;
}
CSS变量就像JS的变量,每个类名或者花括号就像一个function
,里面的变量只有上下文以内可以获取,这就让CSS有了更多可能性。
这使得外部变量稍微改变,整个CSS都可以大大联动,且是实时的。
作者:旧旧的 <393210556@qq.com> 解决问题的方式,就是解决它一次
CSS变量使用解析的更多相关文章
- CSS变量variable
前面的话 一直以来,CSS中是没有变量而言的,要使用 CSS 变量,只能借助 SASS 或者 LESS 这类预编译器.新的草案发布之后,直接在 CSS 中定义和使用变量不再是幻想了.本文将详细介绍CS ...
- CSS变量试玩儿
CSS很美妙,能够为您的页面穿上衣裳,各种各样五彩斑斓的衣裳,但是对于开发者来说,他又不够灵动,于是乎有了各种各样的预处理器Sass.LESS.Stylus(笔者建议Sass的SCSS语法),这些预处 ...
- CSS变量(CSS variable)
使用 CSS 变量编写你的样式代码 基本使用: 1. --variable: <declaration-value> 2. <css-attribute>: var(--var ...
- 引人瞩目的 CSS 变量(CSS Variable)
这是一个令人激动的革新. CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量. 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变 ...
- 第一个CSS变量:currentColor
一.基本介绍 CSS变量正慢慢地从最初的草案到浏览器实现.但规范中有个已经存在多年的变量:currentColor.这个CSS特性具有良好的浏览器支持和一些实际的应用,本篇文章,我们来学习和了解它. ...
- 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/ 转载请注明出处:葡萄城官网,葡萄城为开 ...
随机推荐
- RedHatEnterpriseLinuxServerRelease7.3上配置vsftpd服务器
0.vsftpd与ftp安装 yum install -y vsftpd ftp 1.vsftpd 服务启停相关命令 systemctl start vsftpd systemctl stop vsf ...
- java编程-无锁初始化
private final Node<K,V>[] initTable() { Node<K,V>[] tab; int sc; while ((tab = table) == ...
- unity3d中C#与JS的一些区别
unity3d目前支持C#和JS两种脚本语言. 学习过程中发现很多教程使用的是JS语言,自己还是用C#比较多,unity原生使用的是Mono,使用C#会更加接近unity的编程思想. 1.方法的定义, ...
- Python程序执行时的不同电脑路径不同问题
原因:因代码转移时项目路径发生了变化,导致解释器无法找到对应路径,是的程序无法正常执行 需求: 1.我希望代码能在不同的电脑下,不必修改源代码就能正常执行(所需模块已安装的前提下) 2.我希望代码在命 ...
- Python全栈工程师(元组、字典)
ParisGabriel 感谢 大家的支持 你们的阅读评价就是我最好的更新动力 我会坚持吧排版做的越来越好 每天坚持 一天一篇 点个订阅吧 灰常感谢 当个死粉也阔以 ...
- pytorch版本问题:AttributeError: 'module' object has no attribute '_rebuild_tensor_v2'
用pytorch加载训练好的模型的时候遇到了如下的问题: AttributeError: 'module' object has no attribute '_rebuild_tensor_v2' 到 ...
- mysql安装目录、配置文件存放位置
linux系统下,如何知道mysql使用的配置文件到底是哪个呢?linux自带的mysql的安装目录又是什么呢?数据存放在什么目录下? 1.linux系统自带的mysql,其安装目录及数据目录查看方法 ...
- [转]Docker学习笔记之一,搭建一个JAVA Tomcat运行环境
本文转自:http://www.blogjava.net/yongboy/archive/2013/12/12/407498.html 前言 Docker旨在提供一种应用程序的自动化部署解决方案,在 ...
- fisheye在centos上的安装
目录 描述 部署过程 安装及配置 破解 添加存贮库 在jira上配置 描述 Fisheye 一个源代码库深度查看软件,它可以挖掘源代码库中的有用信息,呈现在Web浏览器界面上. Crucible是一个 ...
- XJOI NOIP模拟题1
第一题 分析: 开始想的是贪心,取每列均值最大一段. 应该是01分数规划,具体看代码 代码: program gold; var a:..]of int64; n,i,m,j,x:longint; f ...