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: 20;
  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原生的变量的定义方法,就想定义元素的属性一样

时间: 2024-12-15 05:50:42

css原生变量 var的相关文章

了解CSS/CSS3原生变量var

一.变量是个好东西 在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处. 随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,CSS工作组迅速跟进CSS变量的规范制定,并且,很多浏览器已经跟进,目前,在部分项目中已经可以直接使用了. Chrome/Firefox/Safari浏览器都是绿油油的,兼容性大大超出我的预期,于是果断尝鲜记录下语法用法和特性. 二.CSS变量var()语法和用法和特性 CSS中原生的变量定义语法是:

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

利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期以及时间,至于钟表上的刻度.数字等元素,因为量比较多,采用jvascript生成 <!doctype html> <html> <head> <meta charset="UTF-8"> <link rel='stylesheet' h

CSS自定义变量属性——像less,sass那样在css中使用变量(译)

介绍 通常大型文档或者应用(甚至小规模的文档或应用)会包括大量的CSS.在这些CSS文件中通常会有大量相同的数据:例如,一个网站可能用了一个颜色主题并反复用三到四种颜色贯穿始终.改动这些数据会非常困难并且容易出错,因为它零散地分布在CSS文件(甚至多个文件)中,可能无法使用寻找替换实现. 于是CSS自定义变量属性应运而生,它允许用户使用特定语法定义相关变量,并在一定范围内反复使用var()引用,改动这些变量,引用这些变量的地方的CSS也将对应地发生变化. 亲测:ios9环境下没有效果,ios9不

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

Swift中的变量var和let常量 首先介绍一下Swift中的 var 和 let (1)var 是 variable的缩写形式,是变量的意思 ,是可改变的.并非数据类型 比如: 注意每一个语句后面不用加分号 var i:double=10.0 //将i指为double类型的,变量名后面加个冒号 var i = 10 // 假设不指定类型的话,系统会自己主动依据你的赋值来推断类型 i = 15 //正确的写法 (2)let 是常量的意思.不可改变的 比如: let name:String =

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

在新接触的项目中,看到很多声明变量时用var.只记得在javascript中声明变量用var.今天在家里看C#和.Net高级编程,看到隐式变量这一块,就总结一下C# 中隐式变量var的用法. 1.C#可以使用var关键字创建隐式类型的本地变量,使用var关键字不必指定具体的数据类型,编译器会根据本地数据点的初始值来自动推断实际的数据类型. 2.隐式类型变量var的限制: (1)隐式类型只能用于方法或属性范围内的本地变量,不能用于定义返回值,参数或自定义类型的字段数据. (2)var关键字声明的本

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

Swift中的变量var和let常量 首先介绍一下Swift中的 var 和 let (1)var 是 variable的缩写形式,是变量的意思 ,是可改变的,并不是数据类型 例如: 注意每个语句后面不用加分号 var i:double=10.0 //将i指为double类型的,变量名后面加个冒号 var i = 10 // 如果不指定类型的话,系统会自动根据你的赋值来判断类型 i = 15 //正确的写法 (2)let 是常量的意思,不可改变的 例如: let name:String = "J

CSS自定义属性级联变量var()

.referenceLink { text-decoration: none !important; font-size: 16px !important; color: hsl(200, 100%, 50%) !important } .referenceLink:hover,.notReferenceLink:hover { color: hsl(240, 100%, 50%) !important } .notReferenceLink { color: inherit !importan

原声css 中变量的使用

前两天看到阮大神的一篇在css中使用变量的文章,整理了一下. 这个重要的 CSS 新功能,所有主要浏览器已经都支持了.本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大. 一.变量的声明 声明变量的时候,变量名前面要加两根连词线(--). body { --foo: #7F583F; --bar: #F7EFD2; } 上面代码中,body选择器里面声明了两个变量:--foo和--bar. 它们与color.font-size等正式属性没有什么不同,只是没有默认含义.所以 CSS 变

CSS原生布局方式

前言 网页原生布局的方法其实网上有很多,大概为Flow(流动布局模型).Float(浮动布局模型).Layer(层级布局模型).<!--more--> Flow布局 流动布局模型其实就是默认的网页布局模式.也就是说网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的.流动布局将会有两个比较典型的特征,第一,块级元素都会在所处的最近父级容器元素内自上而下按顺序垂直顺延分布,因为在默认状态下,块级元素的宽度都是100%(即父级元素宽度的100%).实际上,块状元素都会以行的形式占据位