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. 全栈项目|小书架|服务器端-NodeJS+Koa2 实现搜索功能

    搜索功能会包含:热搜.搜索列表. 热搜功能在电商的搜索中经常看到,热搜数据的来源有两种 用户真实的搜索数据,根据算法进行排序 人为推送的数据 想想微博热搜是可以买的就知道热搜功能多么重要了. 我采用第 ...

  2. oracle查询包含在子表中的主表数据

    Oracle数据库,查询某表中包含在子表中的数据,子表中数据按特定条件来源于该父表,SQL命令如 ) a_table父表,b_table子表,a和b表都有commandId列,a表的commandId ...

  3. C# 的ToString 常用方法

    货币 2.5.ToString("C") ¥2.50 D 十进制数 25.ToString("D5") 00025E 科学型 25000.ToString(&q ...

  4. pyhon opencv mojave 摄像头报错

    https://blog.csdn.net/renzibei/article/details/82998933 参考了上面博主的例子,才明白. Mac macOS 10.14 Mojave Xcode ...

  5. JBOOT使用总结

    @Override public SwAdmin findById(long id) { return DAO.findFirst("SELECT * FROM sw_admin WHERE ...

  6. 英伟达 cuda 开发套件下载

    下载地址 https://developer.nvidia.com/cuda-toolkit 安装比较简单,就不多说了.

  7. 英语dyamaund钻石

    dyamaund  英文词汇,中文翻译为金刚石的;镶钻;用钻石装饰 中文名:镶钻;钻石装饰 外文名:dyamaund 目录 释义 dyamaund 读音:[ˈdaɪəmənd, ˈdaɪmənd] ...

  8. 【数据泵】EXPDP导出表结构

    [数据泵]EXPDP导出表结构(真实案例) BLOG文档结构图         因工作需要现需要把一个生产库下的元数据(表定义,索引定义,函数定义,包定义,存储过程)导出到测试库上,本来以为很简单的, ...

  9. JMeter java.net.BindException: Address already in use: connect

    原文:https://blog.csdn.net/macwhirr123/article/details/77199057 出现原因:TCP/IP连接数不够或TIME_WAIT中存在很多链接,导致吞吐 ...

  10. H3C 802.11n的频宽模式