CSS Variables,一个并不是那么新的东西,但对css来说绝对是一场革命。之前使用变量的时候,需要借助sass、less等预处理工具来实现,现在我们可以直接使用css来声明变量。

一、兼容性

  先来看下兼容性

二、语法

  语法有点难看但很简单,--*来声明变量名,var(--*)来使用,也许你要问了,为什么使用--不用$一类的呢,唉,那不是sass、less两个货用了吗

1、声明和使用必须放在{}代码块里

body{
--bg-color: lightblue;
background-color: var(--bg-color);
}

2、全局变量与变量覆盖

  在:root代码块里面声明的变量就是全局变量,并且局部变量会覆盖全局变量

:root{
--bg-color: red;
}
body{
--bg-color: lightblue;
background-color: var(--bg-color);
}

  最后生效的是--bg-color: lightbluebg-color变量的值也就变成了lightblue

.block {
color: #8cacea;
--color: blue;
}

  局部作用域:`--color`作用域是`.block`选择器

3、变量的缺省值

  完整的变量使用语法 var( [, ]? ),当变量没有定义的时候,会使用后面的值。看下面的例子

body{
--: red;
color:var(--, blue);
}

  上面代码会在body的作用域里面查找--2变量,没有的话就会查找全局,都没有的话就会使用后面的值,所以最后生效的颜色就是blue

  可以看到,上面我们的变量名直接使用了数字

CSS Variables:css自定义属性的使用的更多相关文章

  1. css variables & CSS 变量

    css variables & CSS 变量 https://gist.github.com/xgqfrms-GitHub/5d022a13292c615d2730e84d909e1aba c ...

  2. CSS变量(自定义属性)实践指南

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

  3. CSS Variables

    CSS原生变量(CSS自定义属性) 示例地址:https://github.com/ccyinghua/Css-Variables 一.css原生变量的基础用法 变量声明使用两根连词线"-- ...

  4. [CSS3] Create Dynamic Styles with CSS Variables

    In this lesson we are going to use CSS variables to keep our application's colors consistent. This i ...

  5. CSS Vocabulary – CSS 词汇表,你都掌握了吗?

    CSS 是前端开发必备技能,入门容易,深入难.比如像 Pseudo-class.Pseudo-element.Media query.Media type 以及 Vendor prefix 的概念,很 ...

  6. css样式 --- CSS hack

    前端样式,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道一 ...

  7. CSS Sprites (CSS图像拼合技术)教程工具

    什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...

  8. CSS:CSS定位和浮动

    CSS2.1规定了3种定位方案 1.Normal flow:普通流(相对定位 position relative.静态定位 position static) 普通流(normal flow,国内有人翻 ...

  9. CSS之CSS hack

    由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系.我们就可以根据这个来针对不同的浏览器来写不同的CSS. CSS Hack大致有3种表现形式,CSS类内部Hack.选择器H ...

随机推荐

  1. Golang/Go goroutine调度器原理/实现【原】

    Go语言在2016年再次拿下TIBOE年度编程语言称号,这充分证明了Go语言这几年在全世界范围内的受欢迎程度.如果要对世界范围内的gopher发起一次“你究竟喜欢Go的哪一点”的调查,我相信很多Gop ...

  2. How do you run an interactive process in Dart?

    https://stackoverflow.com/questions/12682269/how-do-you-run-an-interactive-process-in-dart The test ...

  3. 你忘记过VM密码吗?

    翻出N年前的VM主机,但是忘记密码时如何处理?总不能扔吧....常见的方法有哪些?1.重装一个VM(但是里面数据就没了)2.做一个PE进去重置密码(如何身边没有PE怎么样)3.用我们的办法... 还记 ...

  4. Git版本管理工具使用

    1.Git简介 Git(读音为/gɪt/.)是一个开源的分布式版本控制系统,可以有效.高速地处理从很小到非常大的项目版本管理. Git 是 Linus Torvalds 为了帮助管理 Linux 内核 ...

  5. HDFS之安全模式

    1.namenode启动的时候,首先将映像文件[fsimage]载入内存,并执行编辑日志[edits]中的各项操作. 2.一旦在内存中成功建立文件系统元数据的映射,则创建一个新的fsimage文件[这 ...

  6. AIX 静默安装11gR2 RAC

    AIX安装11gR2  RAC   一.1  BLOG文档结构图       一.2  前言部分   一.2.1  导读和注意事项 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其它 ...

  7. Zabbix 完整的监控流程

    目录 1.Zabbix的监控历程概念 1.1 基本概念 1.2 流程图 2.创建主机并加入主机组 3.添加新加主机的应用集(aplication) 4.添加监控项(item) 5.告警触发器配置(Tr ...

  8. typeScript学习随笔(一)

    TypeScript学习随笔(一) 这么久了还不没好好学习哈这么火的ts,边学边练边记吧! 啥子是TypeScript  TypeScript 是 JavaScript 的一个超集,支持 es6 标准 ...

  9. 数组函数some、every、find、filter、map、forEach有什么区别

  10. C# 利用log4net 把日志写入到数据库

    效果图: 1:第一步创建SQL表结构   CREATE TABLE [dbo].[LogDetails] (   [LogID] int NOT NULL IDENTITY(1,1) ,   [Log ...