CSS变量:声明全局变量,让编写更快捷 --root

在编写css公共样式的时候,我们都会声明很多通用的颜色、字号等。现在我们可以通过声明CSS变量来实现了

1.变量的声明

CSS变量声明是字母前加两个横线(--)如:

body{

  --Colors:#dfdfdf;

  --fS16px:16px;

}

上述代码中,body选择器中声明了Colors和fS16px两个变量。而使用‘--’是因为$被Sass占用了,@被Less占用了,所以是为了区分它们。

同时,你也可以用--root{}来存放所有变量,在下边使用的时候直接调用即可。如:

--root{

  --Colors:#dfdfdf;

  --fS16px:16px;

}

变量的声明对大小写敏感。如:colors和Colors表示两个不同的变量

2.var()函数

var函数用来读取变量

a{
  color:var(--Colors)
}

var()函数还可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值。

color: var(--Colors, #e5e5e5);

第二个参数不处理内部的逗号或空格,都视作参数的一部分。

var(--fontF, "Roboto", "Helvetica");
var(--Margins, 15px 20px 25px);

var()函数还可以用在变量声明中

--root{
      --bgcolors:red;
      --fColor:var(--bgcolors)
}

注意:变量只能作为属性值,不能作为属性名

3.变量值的类型

如果变量值是字符串,则可以与其他字符串拼接

--far:‘hello‘;
--foo:var(--far)‘,world‘;

如果是数值,则不可以拼接

--far:20;
--foo:var(--far)‘px‘; //无效

但可以通过calc()函数,将他们拼接起来

--far:20;
--foo:calc(var(--far)*1px);

如果变量值带单位,则不能写成字符串形式

--far:‘20px‘;
margin-top:var(--far); //无效

--far:20px;
margin-top:var(--far); //有效

4.作用域

<style>
  :root { --color: blue; }
  div { --color: green; }
  #alert { --color: red; }
  * { color: var(--color); }
</style>

<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>

上面代码中,三个选择器都声明了--color变量。不同元素读取这个变量的时候,会采用优先级最高的规则,因此三段文字的颜色是不一样的。

这就是说,变量的作用域就是它所在的选择器的有效范围。

所以一些通用的变量值,最好声明在--root{}内

时间: 2024-11-05 16:11:08

CSS变量:声明全局变量,让编写更快捷 --root的相关文章

引人瞩目的 CSS 变量(CSS Variable)

这是一个令人激动的革新. CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量. 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变量. 一直以来我们都知道,CSS 中是没有变量而言的,要使用 CSS 变量,只能借助 SASS 或者 LESS 这类预编译器. 但是新的草案发布之后,直接在 CSS 中定义和使用变量已经不再是幻想了,像下面这样,看个简单的例子: // 声明一个变量: :root{ --bgColor:#000; }

强大的CSS: 让编写更高效的选择器

高效的CSS已经不是一个新的话题了,也不是我一个非得重拾的话题,但它却是我在工作之时,所感兴趣的,关注已久的话题. 有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也可以变得很低能.这很容易被忘记,尤其是当你意识到你会的太少,CSS代码效率很低的时候. 下面的规则只真正被应用到那些速度要求很高,有成百上千的DOM元素被绘制在页面上的大型网站.但是,实践出真理,多知道一点总是好的. CSS 选择器 对我们大多数人来说,CSS选择器并不陌生.最基本的选择器是元素选择器(比如d

编写更好的jQuery代码(转)

这是一篇关于jQuery的文章,写到这里给初学者一些建议. 原文地址:http://flippinawesome.org/2013/11/25/writing-better-jquery-code/ 现在已经有很多文章讨论jQuery和JavaScript的性能问题,然而,在这篇文章中我计划总结一些提升速度的技巧和一些我自己的建议来改善你的jQuery和JavaScript代码.更好的代码意味着更快的应用程序,快速渲染和反应性意味着一个更好的用户体验. 首先,我们要记住最重要的一点是:jQuer

CSS变量variable

前面的话 一直以来,CSS中是没有变量而言的,要使用 CSS 变量,只能借助 SASS 或者 LESS 这类预编译器.新的草案发布之后,直接在 CSS 中定义和使用变量不再是幻想了.本文将详细介绍CSS变量variable 基本用法 CSS 变量是由CSS作者定义的实体,其中包含要在整个文档中重复使用的特定值.使用自定义属性来设置变量名,并使用特定的 var() 来访问 兼容性:移动端和IE浏览器不兼容 [声明变量] 变量必须以--开头.例如--example-variable: 20px,意思

编写更好的jQuery代码的建议

编写更好的jQuery代码的建议 2013/12/05 | 分类: WEB前端, 开发 | 15 条评论 | 标签: JQUERY 分享到:125 本文由 伯乐在线 - yanhaijing 翻译自 Mathew Carella.欢迎加入技术翻译小组.转载请参见文章末尾处的要求. 讨论jQuery和javascript性能的文章并不罕见.然而,本文我计划总结一些速度方面的技巧和我本人的一些建议,来提升你的jQuery和javascript代码.好的代码会带来速度的提升.快速渲染和响应意味着更好的

实现响应式——CSS变量

CSS 变量是 CSS 引入的一个新特性,目前绝大多数浏览器已经支持了,它可以帮助我们用更少的代码写出同样多的样式,大大提高了工作效率,本篇文章将教你如何使用 CSS 变量(css variable). CSS中原生的变量定义语法是:--*,变量使用语法是:var(--*),其中*表示变量名称 变量声明 使用 :root 来声明 css 变量,root 相当于根元素 html,例如声明一个背景颜色为红色的 red 变量,示例如下 :root{    --red: #f00;} 如何应用这个变量呢

如何编写更棒的代码:11个核心要点

作为一个合格的程序员,有太多的理由促使你去编写干净利落且可读性强的代码.最重要的是因为你编写的代码,将来会有很多人一次次地阅读.当你有一天回过头来看自己的代码时,你就会明白编写优雅的代码是多么的重要.另外,如果别人来阅读你编写的代码,你是否想知道别人看到那些烂代码无比抓狂的感受.因此,花多一点的时间去编写优雅的代码,将来说不定会给你节省更多的时间. 那么,如何编写更棒的代码,下面是11条基本规则: 1.保持方法简短扼要 2.永远永远不要将同一个变量用于不同的目的 3.尽可能让变量和方法的名称能够

js常用函数、书写可读性的js、js变量声明...

1.Array类型函数 array.concat(item...) 函数功能:关联数组,实现数组相加功能,但并不影响原先数组,concat返回新数组. array.join(separator) 函数功能:将array中的每个元素用separator为分隔符构造成字符串,默认的separator是逗号,当然你可以自己指定separator 事实上join方法最常用的地方在字符串相加,用过js的人都知道js的字符串相加是特别慢且性能特别差的,把大量片段字符串放在一个数组中并用join方法连接比用+

【C语言探索之旅】 第一部分第四课第二章:变量的世界之变量声明

内容简介 1.课程大纲 2.第一部分第四课第二章:变量的世界之变量声明 3.第一部分第四课第三章预告:变量的世界之显示变量内容 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C语言编写三个游戏. C语言编程基础知识 什么是编程? 工欲善其事,必先利其器 你的第一个程序 变量的世界 运算符 条件表达式 循环语句 实战:第一个C语言小游戏 函数 练习题 习作:完善第一个C语言小游戏 C语言高级技术 模块化编程 进击的指针,C语言王牌 数组 字符串 预处理