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的更多相关文章

  1. css原生变量var()

    了解css/css3原生变量var 阮一峰css变量教程 深入学习css自定义属性(css变量)

  2. CSS/CSS3中的原生变量var详解以及布局响应式网页扩展

    使用语法 首先我们先来看一个例子:html代码: <div class="element">这是一段文字</div> css代码: .element { w ...

  3. 了解CSS/CSS3原生变量var

    一.变量是个好东西 在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处. 随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,C ...

  4. 了解CSS/CSS3原生变量var (转)

    一.变量是个好东西 在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处. 随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,C ...

  5. css - 原生变量及使用函数 var()

    零.序言 前两天在逛 blog 的时候看见一些内联样式新奇的写法时很纳闷,虽然说不上多么熟练,但是从来没见过  --color: brown 这样的写法,百度一番之后仍然没啥头绪,今天偶然看到一篇文章 ...

  6. 【转载】了解CSS/CSS3原生变量var

    文章转载自:鑫空间鑫生活(https://www.zhangxinxu.com/) 原文链接:http://www.zhangxinxu.com/wordpress/?p=5804 内容摘要: 在任何 ...

  7. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  8. C#中隐式类型本地变量var

    在新接触的项目中,看到很多声明变量时用var.只记得在javascript中声明变量用var.今天在家里看C#和.Net高级编程,看到隐式变量这一块,就总结一下C# 中隐式变量var的用法. 1.C# ...

  9. Swift学习——变量var和let常量的用法(一)

    Swift中的变量var和let常量 首先介绍一下Swift中的 var 和 let (1)var 是 variable的缩写形式,是变量的意思 ,是可改变的.并非数据类型 比如: 注意每一个语句后面 ...

随机推荐

  1. org.xml.sax.SAXParseException: 元素内容必须由格式正确的字符数据或标记组成,的错误问题

    当时在mapper其中的一个语句是case when ISNULL(b.c_truename) || LENGTH(TRIM(b.c_truename)) < 1 then b.c_ch_nam ...

  2. error MIDL2311 解决方法

    error MIDL2311 : statements outside library block are illegal in mktyplib compatability mode : [] 在编 ...

  3. 从SOA到BFV【普元的一份广告文章】

    人类对美好生活的追求是一切技术进步的原动力. 简便.快捷.联结……,这些移动互联的价值让它正成为最贴近消费者的力量.人和设备,设备和设备,人和服务,人和企业,企业和企业都发生了连接.诸如微信.携程.大 ...

  4. flask结合令牌桶算法实现上传和下载速度限制

    限流.限速: 1.针对flask的单个路由进行限流,主要场景是上传文件和下载文件的场景 2.针对整个应用进行限流,方法:利用nginx网关做限流 本文针对第一中情况,利用令牌桶算法实现: 这个方法:h ...

  5. 使用datatables实现列宽设置、水平滚动条、显示某列部分内容

    示例 1.//使用 columnDefs 给列设置宽度 $('#example').DataTable( { "columnDefs": [ //给第一列指定宽度为表格整个宽度的2 ...

  6. 聊聊WiFi Hacks:为何你的Karma攻击不好使了

    0.前言 三年前我发表了一篇文章<黑客有办法让你自动连上陌生WiFi>,介绍Karma攻击可以让你的无线设备自动连上黑客的WiFi.当时引起了还算比较热烈的讨论,关于WiFi安全,关于Ka ...

  7. STL源代码分析--deque

    一.deque的中控器       deque是连续空间(至少逻辑上看来如此),连续线性空间总令我们联想到array或vector.array无法成长,vector虽可成长,却仅仅能向尾端成长.并且其 ...

  8. mmall 项目实战(一)项目初始化

    1.创建 数据库 及 表 数据脚本: /* Navicat Premium Data Transfer Source Server : 182.92.82.103 Source Server Type ...

  9. javascript return 跟 break区别

    break是跳出当前循环,return是中止函数的执行

  10. 【Android】Android聊天机器人实现

    昨天看到一个Android视频教程讲图灵机器人.那个API接口用起来还是挺方便的,就准备自己动手做一个了. 另外自己还使用了高德地图的API接口用于定位(曾经用过高德的接口,比X度方便) 大体流程: ...