css原生变量 var
css 变量的支持情况:
在pc端支持还不错,ie不支持,移动端也不支持,大概这就是css变量没有广泛使用的原因吧
CSS预编译工具Sass/Less/Stylus的便捷之处就是可以定义变量,方便代码的维护,其实css也有自己原生的变量var:
命名方式:--* (以--开头,*代表变量名称)
变量名称命名规则:
不能以:$
,[
,^
,(
,%
等字符字符开头,可以是数字,但是css和js不能以数字开头;但是可以是中文,日文或者韩文
使用方法:
1 就想定义元素的属性一样:
:root{ --red:red; --blue:blue; --yellow:yellow; }
.div1{
background-color:var(--red);
}
2 css变量有自己的作用域:
例如:
#div2{ --borderWidth:2px; } .div3{ --borderColor:red; border:1px solid var(--borderColor); } #div2{ border:var(--borderWidth) solid red; }
.div3中的--borderColor只能class为div3的元素可以使用,它的作用域在div3中
--borderWidth 只能是id为div2的元素才可以使用,别的元素没有作用
:root下定义的变量的作用域是整个文档
3 css缺省值
var( <自定义属性名> [, <默认值 ]? )
.div5{ background-color:var(--color,red); }
--color变量没有定义,就使用默认值red;
所以上面的定义方式等价于:
.div5{ background-color:red;
}
4 css变量默认值
.div6{ background-color:var(--color); }
div6没有定义默认值。--color变量没有定义。背景颜色默认是白素
等价于没有定义背景颜色
5 不合法的变量值:
.div7{ --width:20px; color:var(--width,red); }
不合法的使用,不是缺省值。等价于
.div7{ --width:20px; color:20px; }
所以文字的颜色是文字的默认颜色,不是红色而是黑色
6 CSS变量的空格尾随特性
.div8{
--size:20px;
font-size:var(--size)px;
}
div8的字体大小并不是20px;是默认的字体大小
解析出来是font-size:20 px;在20的后边有一个空格 。。。。
可以使用CSS3 calc()
计算:
.div8 {
--size:;
font-size: calc(var(--size) * 1px);
}
div8的字体大小才是20px;
7 css属性不能定义变量。例如:
.div4{ --width:width; border-var(--width):1px; var(--width):20px; }
上面的定义方式是不合法的
8 与Sass/Less/Stylus中的定义不同,不能像定义变量一样;例如:
--red:red;
span{
background-color:var(--red);
}
上面的定义方法是不起作用的
css原生的变量的定义方法,就想定义元素的属性一样
css原生变量 var的更多相关文章
- css原生变量var()
了解css/css3原生变量var 阮一峰css变量教程 深入学习css自定义属性(css变量)
- CSS/CSS3中的原生变量var详解以及布局响应式网页扩展
使用语法 首先我们先来看一个例子:html代码: <div class="element">这是一段文字</div> css代码: .element { w ...
- 了解CSS/CSS3原生变量var
一.变量是个好东西 在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处. 随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,C ...
- 了解CSS/CSS3原生变量var (转)
一.变量是个好东西 在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处. 随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,C ...
- css - 原生变量及使用函数 var()
零.序言 前两天在逛 blog 的时候看见一些内联样式新奇的写法时很纳闷,虽然说不上多么熟练,但是从来没见过 --color: brown 这样的写法,百度一番之后仍然没啥头绪,今天偶然看到一篇文章 ...
- 【转载】了解CSS/CSS3原生变量var
文章转载自:鑫空间鑫生活(https://www.zhangxinxu.com/) 原文链接:http://www.zhangxinxu.com/wordpress/?p=5804 内容摘要: 在任何 ...
- 利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
- C#中隐式类型本地变量var
在新接触的项目中,看到很多声明变量时用var.只记得在javascript中声明变量用var.今天在家里看C#和.Net高级编程,看到隐式变量这一块,就总结一下C# 中隐式变量var的用法. 1.C# ...
- Swift学习——变量var和let常量的用法(一)
Swift中的变量var和let常量 首先介绍一下Swift中的 var 和 let (1)var 是 variable的缩写形式,是变量的意思 ,是可改变的.并非数据类型 比如: 注意每一个语句后面 ...
随机推荐
- org.xml.sax.SAXParseException: 元素内容必须由格式正确的字符数据或标记组成,的错误问题
当时在mapper其中的一个语句是case when ISNULL(b.c_truename) || LENGTH(TRIM(b.c_truename)) < 1 then b.c_ch_nam ...
- error MIDL2311 解决方法
error MIDL2311 : statements outside library block are illegal in mktyplib compatability mode : [] 在编 ...
- 从SOA到BFV【普元的一份广告文章】
人类对美好生活的追求是一切技术进步的原动力. 简便.快捷.联结……,这些移动互联的价值让它正成为最贴近消费者的力量.人和设备,设备和设备,人和服务,人和企业,企业和企业都发生了连接.诸如微信.携程.大 ...
- flask结合令牌桶算法实现上传和下载速度限制
限流.限速: 1.针对flask的单个路由进行限流,主要场景是上传文件和下载文件的场景 2.针对整个应用进行限流,方法:利用nginx网关做限流 本文针对第一中情况,利用令牌桶算法实现: 这个方法:h ...
- 使用datatables实现列宽设置、水平滚动条、显示某列部分内容
示例 1.//使用 columnDefs 给列设置宽度 $('#example').DataTable( { "columnDefs": [ //给第一列指定宽度为表格整个宽度的2 ...
- 聊聊WiFi Hacks:为何你的Karma攻击不好使了
0.前言 三年前我发表了一篇文章<黑客有办法让你自动连上陌生WiFi>,介绍Karma攻击可以让你的无线设备自动连上黑客的WiFi.当时引起了还算比较热烈的讨论,关于WiFi安全,关于Ka ...
- STL源代码分析--deque
一.deque的中控器 deque是连续空间(至少逻辑上看来如此),连续线性空间总令我们联想到array或vector.array无法成长,vector虽可成长,却仅仅能向尾端成长.并且其 ...
- mmall 项目实战(一)项目初始化
1.创建 数据库 及 表 数据脚本: /* Navicat Premium Data Transfer Source Server : 182.92.82.103 Source Server Type ...
- javascript return 跟 break区别
break是跳出当前循环,return是中止函数的执行
- 【Android】Android聊天机器人实现
昨天看到一个Android视频教程讲图灵机器人.那个API接口用起来还是挺方便的,就准备自己动手做一个了. 另外自己还使用了高德地图的API接口用于定位(曾经用过高德的接口,比X度方便) 大体流程: ...