简单介绍 CSS Variables

tylin 发布于2019-08-30 12:50 / 2597人阅读

摘要：例如变量同样是可嵌套使用的，用来定义全局变量浏览器兼容性我在写这篇文章的时候，这个特性依然处于实验阶段，所以，目前来说，只有以及支持了这个特性。变量也是可用嵌套的变量还可以更另一个特性方法一起使用本文来自我的博客

如果我们用过动态样式语言（像 Less、 Sass ）的话，肯定对其中可以定义变量的特性非常喜欢，特别是随着样式文件越来越复杂的时候，把一些值抽成变量会使代码更好维护。现在随着 CSS 的发展，目前 CSS Variables 也引入了自己的变量，本文就对 CSS Variables 进行简单的介绍。

如何定义和使用 CSS Variables

按照 CSS Variables 规范，我们通过 --* 的方式来创建一个CSS变量，并通过 var(--foo) 的方式来引用一个变量（大小写敏感哦）。例如：

:root {
    --brand-primary: #338800;
}

body {
    background-color: var(--brand-primary);
}

CSS变量同样是可嵌套使用的，:root用来定义全局变量

浏览器兼容性

我在写这篇文章的时候，这个特性依然处于实验阶段，所以，目前来说，只有 FireFox 34+ 、 Chrome 49+ 以及 Safari 9.1+ 支持了这个特性。另外， Chrome 48 其实也支持了这个特性，用户需要在浏览器地址栏输入 chrome://flag/ 找到“Enable experimental Web Platform”选项开启才行。

还有一些你该知道的

var() 还可以接受第二个参数（ color: var(--header-color, blue); ），表示备选参数，第一个参数获取失败的时候，它就生效了。

变量也是可用嵌套的：

--base-color: #f93ce9;
--background-gradient: linear-gradient(to top, var(--base-color), #444);

变量还可以更另一个CSS特性——calc()方法一起使用：

--container-width: 1000px;
max-width: calc(var(--container-width) / 2);

本文来自我的博客：http://blog.mcbird.cn/2016/03/09/css-variables/

云服务器 GPU云服务器 css介绍 css简单简单css WebRtc的简单介绍

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115104.html

Javascript如何与Sass,Less,Css之间共享变量？

摘要：环境和及其等先安装，下已配置如何之间共享变量文件目录文件夹下代码核心代码文件定义变量，然后使用。文件有一个关键字，它在功能上等同于的关键字，即导出一个对象。原博文地址，此博文首次发于csdn，原创前段时间遇到网站换肤的需求，本想挺简单的，直接用 Sass 或者 Less 设置变量就好了，结果导致的问题就是 js 中设置的样式得单独设置，好麻烦。本文章代码gitHub地址 ...

honhon 2019-08-23 16:49 评论0 收藏0
Javascript如何与Sass,Less,Css之间共享变量？

摘要：环境和及其等先安装，下已配置如何之间共享变量文件目录文件夹下代码核心代码文件定义变量，然后使用。文件有一个关键字，它在功能上等同于的关键字，即导出一个对象。原博文地址，此博文首次发于csdn，原创前段时间遇到网站换肤的需求，本想挺简单的，直接用 Sass 或者 Less 设置变量就好了，结果导致的问题就是 js 中设置的样式得单独设置，好麻烦。本文章代码gitHub地址 ...

CloudDeveloper 2019-08-29 18:33 评论0 收藏0
CSS Variables学习笔记

摘要：注本文首发于个人博客学习笔记。最近看了下变量，又名自定义属性，跟大家分享一下我的学习笔记。使用自定义属性来设置变量名，并使用特定的来访问。二学习笔记声明调用声明方式变量声明的方式非常简单，如下，声明了一个名叫的变量。注：本文首发于个人博客《CSS Variables学习笔记》。最近看了下CSS Variables（CSS变量，又名CSS自定义属性），跟大家分享一下我的学习笔记。 ...

mudiyouyou 2019-08-29 15:11 评论0 收藏0
bootstrap4.0 css架构

摘要：原子性的默认变量一般是用来设置默认值，然后根据需求来覆盖的。语义化的变量名，值为直接的属性值。组件文件互不引用。组合有几个入口文件对组件进行按顺序的引入，形成不同的专用，形成完整可用的样式，注意引用顺序。原子性 sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的。覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可存放变量的文件。语义化的变量名，值为直接的属性值。 ...

solocoder 2019-08-30 15:53 评论0 收藏0
2017年最新基于hexo搭建个人免费博客——自定义页面样式一

摘要：添加你修改的代码找到你主题文件夹里的对应位置以我的路径为例子里面有个文件夹和一个文件，主要用于打包代码输出成样式的文件分析下其源代码。注意本人不提倡去修改除了下的其他个文件里的源代码，可能后面出问题不好还原。 showImg(https://segmentfault.com/img/remote/1460000008744124?w=1920&h=1280); 前言之前答应一个评论朋...

curried 2019-08-29 12:16 评论0 收藏0