很早直接就了解到CSS变量相关的内容,奈何之前使用价值不高(很多主流浏览器不兼容)

最近发现主流浏览器都已经支持了这一变化

这一重要的变化,可能会让你发现,原生CSS从此变的异常强大~,下面看一下如何使用

变量的声明

css的变量声明标识符为:--,即变量名前面加2个连接线

  1. body {
  2. --head_color: #000;
  3. --head_bar: #F7EFD2;
  4. }

上面代码中,body选择器里面声明了两个变量。它与正常的属性定义上没有什么不同,只是没有默认含义,所以其又叫做CSS自定义属性

这里需要注意的是,其变量名对大小写是敏感的。

变量的引用

变量的引用也很简单,它为我们提供了一个方法专门进行引用,var()函数用于读取变量。

  1. .head {
  2. color: var(--head_color);
  3. }

这样就引用了,另外,如果你担心变量没有定义,它还提供了默认值的设置方式。

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

  1. color: var(--head_color, #7F583F);

需要注意的是,变量值只能用作属性值,不能用作属性名。

如果变量值是数值,不能与数值单位直接连用。

  1. .a {
  2. --gap:;
  3. /* 无效 */
  4. margin-top: var(--gap)px;
  5. }

数值与单位直接写在一起,必须使用calc()函数,将它们连接。

  1. .a{
  2. --gap:;
  3. margin-top: calc(var(--gap) * 1px);
  4. }

作用域

变量只能作用于自身以及后代元素,兄弟元素,祖先元素都不能享用。

所以,如果你的变量是全局享用的,则建议放在:root上,例如:

  1. :root {
  2. --color: red;
  3. }

当然,也可以使用body或者html标签:

  1. body {
  2. --color: red;
  3. }

CSS变量就像JS的变量,每个类名或者花括号就像一个function,里面的变量只有上下文以内可以获取,这就让CSS有了更多可能性。

这使得外部变量稍微改变,整个CSS都可以大大联动,且是实时的。

作者:旧旧的 <393210556@qq.com> 解决问题的方式,就是解决它一次

CSS变量使用解析的更多相关文章

  1. CSS变量variable

    前面的话 一直以来,CSS中是没有变量而言的,要使用 CSS 变量,只能借助 SASS 或者 LESS 这类预编译器.新的草案发布之后,直接在 CSS 中定义和使用变量不再是幻想了.本文将详细介绍CS ...

  2. CSS变量试玩儿

    CSS很美妙,能够为您的页面穿上衣裳,各种各样五彩斑斓的衣裳,但是对于开发者来说,他又不够灵动,于是乎有了各种各样的预处理器Sass.LESS.Stylus(笔者建议Sass的SCSS语法),这些预处 ...

  3. CSS变量(CSS variable)

    使用 CSS 变量编写你的样式代码 基本使用: 1. --variable: <declaration-value> 2. <css-attribute>: var(--var ...

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

    这是一个令人激动的革新. CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量. 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变 ...

  5. 第一个CSS变量:currentColor

    一.基本介绍 CSS变量正慢慢地从最初的草案到浏览器实现.但规范中有个已经存在多年的变量:currentColor.这个CSS特性具有良好的浏览器支持和一些实际的应用,本篇文章,我们来学习和了解它. ...

  6. css变量

    CSS变量: 目前主流浏览器都已支持CSS变量,Edge 浏览器也支持 CSS 变量.用户可以方便地在css中使用自定义变量. <!DOCTYPE html> <html lang= ...

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

    转:https://www.h5jun.com/post/autoprefixing-with-css-variables-lea-verou.html 最近,当我在制作 markapp.io 这个小 ...

  8. css变量的用法——(--cssName)

    CSS变量,又称——CSS自定义属性,现在很多CSS预处理/后处理程序已作了相关快捷的编译处理, 基本用法有哪些呢,我们先看一个简单的栗子:——要求,创建一个五个块元素居中的分栏样式,奇数和偶数同高不 ...

  9. CSS变量(自定义属性)实践指南

    本文翻译自:https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 转载请注明出处:葡萄城官网,葡萄城为开 ...

随机推荐

  1. javascript数组&省市联动分别用js数组和JSON实现

    1.定义数组的三种方式: **数组可以存放不同的数据类型   第一种: var arr=[1,2,3];   var arr=[1,"2",true];   第二种: 使用内置对象 ...

  2. FileStream流媒体

    class Program { static void Main(string[] args) { string source = @"mana.mp4"; string targ ...

  3. USACO Section2.2 Runaround Numbers 解题报告 【icedream61】

    runround解题报告---------------------------------------------------------------------------------------- ...

  4. windows 10的资源管理器不显示映射的网络驱动器怎么办?

    最近在使用映射网络驱动器的时候出现一个奇怪的现象.事情源于我在资源管理器里面映射了来自多个不同账号的网络驱动器.使用的是win10系统.映射不同账号的网络驱动器是不允许的.于是只能删掉其他账号和凭证重 ...

  5. SQL 与关系代数

    Table of Contents 前言 关系与表 关系代数的基本运算 投影 选择 并运算 集合差运算 笛卡尔积 更名运算 关系代数的附加运算 集合交运算 连接运算 自然连接 内连接 外连接 结语 前 ...

  6. 一个初学者的辛酸路程-继续Django

    问题1:HTTP请求过来会先到Django的那个地方? 先到urls.py  ,里面写的是对应关系,1个URL对应1个函数名. 如果发URL请求过来,到达这里,然后帮你去执行指定的函数,函数要做哪些事 ...

  7. java IO小结

    package 字符与字节转换; import java.io.*; public class char_byte { public static void main(String[] args) { ...

  8. dpkg.cfg

  9. 一些优秀的SLAM博主

    http://blog.csdn.net/u010566411 http://blog.csdn.net/qq_18661939/article/details/51782376 http://www ...

  10. Leetcode 665.非递减数列

    非递减数列 给定一个长度为 n 的整数数组,你的任务是判断在最多改变 1 个元素的情况下,该数组能否变成一个非递减数列. 我们是这样定义一个非递减数列的: 对于数组中所有的 i (1 <= i ...