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. IDEA和Eclipse启动优化

    昨天对比了下IDEA和Eclipse的启动速度,发现IDEA启动真的是好慢啊!!! 电脑配置:8G win7 IDEA启动配置 -Xms1024m -Xmx1024m -Xmn500m -XX:Met ...

  3. 【转载】C#中Convert.ToDouble方法将字符串转换为double类型

    在C#编程过程中,可以使用Convert.ToDouble方法将字符串或者其他可转换为数字的对象变量转换为double类型,Convert.ToDouble方法有多个重载方法,最常使用的一个方法将字符 ...

  4. Flask第三方组件 之 Flask-Session

    原生session:交由客户端保管机制,安全性相对较差,优势是一点都不占用服务器空间 Flask-Session: 解决原生session的劣势 安装包 from flask import Flask ...

  5. centos7 install mysql5.7.27

    1.yum 安装 wget yum install wget 2.下载MySQL 的yum repo wget https://repo.mysql.com//mysql57-community-re ...

  6. PYTHON 文件读写、坐标寻址、查找替换

    读文件 打开文件(文件需要存在) #打开文件 f = open("data.txt","r") #设置文件对象 print(f)#文件句柄 f.close() ...

  7. ETC1/DXT1 compressed textures are not supported when publishing to iPhone

    Build application in Unity 2017.20f3 用Unity2017/2018编译iPhone版本出现以下错误: ETC1(or DXT1) compressed textu ...

  8. Hibernate配置文件模版

    hibernate.cfg.xml 配置文件模版: <?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE hibernate-config ...

  9. MySQL MGR--数据同步原理

    MGR复制架构 在MySQL 5.7.17版本正式推出组复制(MySQL Group Repliation MGR),用来解决异步复制和半同步复制可能产生数据不一致的问题,组复制依靠分布式一致性协议( ...

  10. 总结一下NDK crash排查步骤

    总结一下NDK crash排查步骤: 先在PC上跑通算法 用Visual Studio写算法的testbed,确保算法能跑通 抓log adb logcat -c; adb logcat > 1 ...