CSS变量(CSS variable)

使用 CSS 变量编写你的样式代码

基本使用:

1. --variable: <declaration-value>

2. <css-attribute>: var(--variable)

第一个是定义 css 变量 其中 --variable 可以是自定义的名称,但是必须 -- 开头,冒号后面是变量的值(变量:值)

第二个是在选择器中使用一开始定义好的 css 变量,使用方式就和正常写样式一样,只是将你的对应属性的值替换成了 var(css变量)

相信你已经看出来了,这个特性和使用 less、sass、stylus 等 css 预处理器书写方式基本一致,但是 css 变量属于原生支持,不用担心依赖工具出错以及后续技术改造等问题,甚至你可以考虑在你的预处理器代码中使用 css 变量(当然,这种极不推荐)。

《小博主与大老爷的小剧场 001》

爷:

  握草,你废话咋那么多!丫的直接上代码好不好?

博主:

  大...大爷,您稍等,马上就上代码,保证新鲜可口。

  首先,使用 css variable 的话必须在选择器内定义变量

:root {
  --main-color: yellowgreen;
}

.yellowgreen {
  color: var(--main-color);
  background-color: bisque;
}

爷:

  就没了?这么两句就没了?耍我是不!

博主:

  当然没有结束啦,上面只是介绍了 css variable 怎么使用的,既然是变量,那么自然得有作用域啦,css variable 作用根据 html 中选择器的结构来的,不像 css 预处理器是根据文件来的,如果你在 css 预处理器中使用变量还必须将变量文件引入到当前的文件中才行,css variable 则不需要限制与文件作用域而是选择器作用域。

  选择器作用域,顾名思义,能被改选择器命中的话就可以使用该变量,而 css variable 不受文件作用域限制的原因也在于此,由于最终都是在浏览器中的同一个页面中运行,那么自然所有的变量和选择器都在同一个页面的作用域中了,因为 css 在运行时才会解析,所以只要你的变量先声明的在使用时自然就能正确解析。

  爷...爷别打了,废话讲完了,给您上代码。

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="./variable.css">
  <link rel="stylesheet" href="./color.css">
</head>
<body>
  <div class="main">
    <ul>
      <li class="main-bg-gray">list-01</li>
      <li>list-02</li>
      <li>list-03</li>
    </ul>
    <p>爷,您看看!我是紫色的 >_< </p>
  </div>
</body>
</html>

variable.css

:root {
  --main-bgc: #ddd;
  --main-color: blueviolet;
}

color.css

ul {
  background-color: var(--main-bgc);
}

.main {
  color: var(--main-color);
}

li {
  --main-color: yellowgreen;
  color: var(--main-color);
}

.main-bg-gray {
  --main-bgc: #4af;
  --main-color: blue;
}

结果如下:

  

  选择器作用域如下

  因此这里的最终生效的变量使用就清晰明了了,依然还是 css 选择器的选择,按照权重来就 O..K 了。至于权重算法:!important > id > inline > class > tag 这个肯定不用我说了对吧。

爷:

  所以嘞,除了变量使用脱离了 css 预处理器外还有啥用吗?只有这点的话还不如回去用我的 sass、less。

博主:

  您使用 sass、less 使用变量主要干嘛呢,变量服用带来的最大特点是啥呢?

爷:

  有屁快放!

博主:

  主题定制啊,还有就是自适应布局啦,用在这些方面都是杠杠的啊。

  您想想啊,使用 css 预处理器本质上不是在写 css,而是写了一个类似 css 的预处理器语法,然后通过预处理器的编译器将其编译成 css,其中变量也只能在编译前使用,编译后会将变量的值给放到编译后的 css 中去浏览器调试时并不方便调试主题样式的更改,基本都是改一次编译一次再看一次,而且编译出来的 css 代码量会增大好几倍,甚至十余倍都有可能。

  而使用 css variable 书写的 css 在浏览器可以直接调试,且代码量没有任何增加,最多使用 postcss 等工具添加个前缀做兼容,尤其对于自适应布局,那省的代码可不是一星半点,以往自适应在移动端上可能 css 的大小都超过 html+JavaScript 之和了。

爷:

  听起来貌似时蛮不错的啊,可以考虑搭个自己的博客用用,兼容性如何?

博主:

  这个嘛......额......,您自己看吧

爷:

  这兼容性,玩个锤子啊!

博主:

  爷,爷,您别急,我们高技术的不能拘泥与那些老旧的浏览器啊,我们自己得先提高,再逐步引导客户您说是不,总不能因为客户中有几个不兼容我们就让所有客户都去将就对吧。况且您要是搭建一个个人博客,那过来看您博客的不都是技术领域的人嘛,他们又有几个人用那些低版浏览器呢对不(针对测试的除外)。

爷:

  有那么点道理哦,回头选个良辰吉日给办了?让我想想看啊......

博主:

  (小声嘀咕)还良辰吉日,你咋不春宵一刻呢,你要搭就搭呗,管我尦事啊 (¬︿??¬☆)。

原文地址:https://www.cnblogs.com/YMaster/p/10878881.html

时间: 2024-10-30 07:14:09

CSS变量(CSS variable)的相关文章

CSS变量variable

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

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

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

CSS 变量教程(转载)

作者: 阮一峰 日期: 2017年5月 9日 今年三月,微软宣布 Edge 浏览器将支持 CSS 变量. 这个重要的 CSS 新功能,所有主要浏览器已经都支持了.本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大. 一.变量的声明 声明变量的时候,变量名前面要加两根连词线(--). body { --foo: #7F583F; --bar: #F7EFD2; } 上面代码中,body选择器里面声明了两个变量:--foo和--bar. 它们与color.font-size等正式属性没有

CSS 变量教程

一.变量的声明 声明变量的时候,变量名前面要加两根连词线(--). body { --foo: #7F583F; --bar: #F7EFD2; } 上面代码中,body选择器里面声明了两个变量:--foo和--bar. 它们与color.font-size等正式属性没有什么不同,只是没有默认含义.所以 CSS 变量(CSS variable)又叫做"CSS 自定义属性"(CSS custom properties).因为变量与自定义的 CSS 属性其实是一回事. 你可能会问,为什么选

css变量

一.变量的声明及使用 声明声明,在变量名前加 --: 变量的使用,用var()调用: :root{   --myColor: deepskyblue;}body{   background: var(--myColor);} 上面伪类root中定义了变量--myColor,它与正式属性没有什么不同,所以 CSS 变量(CSS variable)又叫做"CSS 自定义属性"(CSS custom properties). 把css变量直接看成属性就行,更好理解. CSS变量使用完整语法

css变量保存

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

实现响应式——CSS变量

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

【译】巧用 CSS 变量实现自动前缀

转https://www.h5jun.com/post/autoprefixing-with-css-variables-lea-verou.html 最近,当我在制作 markapp.io 这个小网站的时候,我想出一个巧妙的技巧用在 CSS 变量上,我们可以天然地使用它们的动态本质.让我们看一下当你想使用一个属性,但是这个属性有不同的版本,一个无前缀的标准版和一个或多个有前缀的版本的情形.在这里我举一个例子,比如我们使用clip-path,目前需要同时使用无前缀的版本和一个-webkit-前缀

CSS变量试玩儿

CSS很美妙,能够为您的页面床上衣裳,各种各样五彩斑斓的衣裳,但是对于开发者来说,他又不够灵动,于是乎有了各种各样的预处理器Sass.LESS.Stylus(笔者建议Sass的SCSS语法),这些预处理器可以很大程度的提高CSS的灵活性,增强CSS的代码组织与维护.但是毕竟不是亲生的,然后负责CSS开发的那些大牛们坐不住了,开始给CSS赋予一些新的特性,本文就来探讨下CSS变量的进展与应用. W3C的关于CSS变量的最新探索体现在CSS Custom Properties for Cascadi