css自定义属性（css变量）

Null 发布于2019-08-29 16:20 / 2761人阅读

摘要：但不能包含，，，，等字符，普通字符局限在只要是数字字母下划线和短横线这些组合，但是可以是中文，日文或者韩文。

前言

刚开始的“css变量”，经扩展之后，称为“css自定义属性”
当各种预处理器满天飞的时候，css变量已经开始渐渐普及
在特定的应用场景，css变量确实发挥了很大的作用
下面开始学习css变量

正文 一、变量的声明和使用

CSS选择器不能是数字开头，JS中的变量是不能直接数值的，但是，在CSS变量中，这些限制通通没有。但不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合，但是可以是中文，日文或者韩文。

1. 声明：大小写敏感, --variable-name: variable-value;

:root{
    --color: red;
}

2. 使用：使用var(变量名)来使用一个变量

#div {
    color: var(color)
}

3. 变量组合使用
使用变量的时候，通常不会多带带使用，可以组合使用
当变量的值是字符串时，可以直接拼接，如下

:root{
  --screen-category: "category"  //变量值是字符串
}
body:after {
  content: "--screen-category: "var(--screen-category);  // 直接拼接
}

当变量的值是数值时，必须使用calc()函数计算，就算还是简单的单位拼接

.foo {
  --gap: 20;
  /* 无效 */
  margin-top: var(--gap)px;
}

.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}

4. 变量未定义和错误定义
如果我们使用的变量没有定义，则使用后面的值作为元素的属性值, 如下所示
body里面访问不到.box定义的--1，因此使用#cd0000

.box {
  --1: #369; 
}
body {
  background-color: var(--1, #cd0000);
}

使用变量时，若变量已定义，但是变量的值不正确，则使用缺省值,如:

body {
  --color: 20px;
  background-color: #369;
  background-color: var(--color, #cd0000);
}

结果body的颜色是transparent，因为background-color的缺省值就是transparent

二、继承和作用域

1. 作用域
使用:root{}来定义全局css变量
想让变量在局部可用，就定义在某个特定的选择器下
还是下面这段代码

:root{
  color: red; //全局可用
}
.box {
  --1: #369;  //只在.box这个作用域可用 
}
body {
  background-color: var(--1, #cd0000);
}

2. 继承


   
   


.wrapper {
   --color: red;
}

.content1 {
   --color: yellow;
}

content1的--color为yellow
content2的--color没有定义，继承了wrapper的--color为red
--color: yellow只在content1的作用域内有效

三、js操作css变量

:root {
   --color: red;
}

//读取
var root = getComputedStyle(document.documentElement);
var color = root.getPropertyValue("--color").trim();
console.log(color); // "70px"

//改变
document.documentElement.style.setProperty("--color", "yellow");
var color = root.getPropertyValue("--color").trim();
console.log(color);  // "100px"

//删除
document.documentElement.style.removeProperty("--color");
var color = root.getPropertyValue("--color").trim();
console.log(color); // "70px"

四、与预处理器(sass,less)比较

1. css变量：

动态性，可以在运行时更改
可以方便地从js读写
可继承，可组合，有作用域

2. 预处理器：

预处理器的变量不是动态的，在运行时不可更改
预处理器的变量没有作用域的说法
不能与js交互

五、兼容

基本上能兼容大部分主流浏览器，直接使用没有太大问题
如果想使用但又想兼容所有浏览器，就是用下面的方法检测浏览器是否支持CSS自定义属性的方法

/*css*/
@supports ( (--a: 0)) {
    /* supported */
}

@supports ( not (--a: 0)) {
    /* not supported */
}

// Js
if (window.CSS && window.CSS.supports && window.CSS.supports("--a", 0)) {
    alert("CSS properties are supported");
} else {
    alert("CSS properties are NOT supported");
}

六、常用场景

为风格统一而使用颜色变量

一致的组件属性（布局，定位等）

避免代码冗余(响应式布局，制动动画)

这里是常用场景的demo：https://github.com/shinyshine...

混合云服务器托管自定义css css属性访问CSS属性 position属性，css

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

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

CSS 自定义属性 - 入门

摘要：变量的函数引用的自定义属性被称为变量。为此，可读性和可维护性是自定义属性最大的优势。自定义属性作用域在中，变量有作用域一说。因此，在选择器中声明的自定义属性，其作用域的范围是全局范围，也就是全局作用域。引言 CSS语言是一种声明式语言，不像其他语言有变量、条件和逻辑等特性，因为这个原因，社区中有了各种CSS处理器语言，比如Sass、LESS和Stylus等。这些处理器语言引入了一...

seanlook 2019-08-30 15:44 评论0 收藏0
CSS变量（自定义属性）使用指南 — SitePoint

摘要：预处理器可以让你设置变量，并且在函数循环和数学操作等中使用。不同之处在于变量是运行在浏览器中的动态属性，而预处理器变量会被编译成普通的代码。变量提供了更多可能性但这并不是说你需要在二者之间选择其一你可以同时使用变量和预处理器变量的强大功能。 CSS预处理器，如Sass和Less，使得CSS代码易于组织和维护。通过提供变量、混合、循环等特性，使得CSS具有动态编写的能力，从而减少重复性工...

light 2019-08-02 16:14 评论0 收藏0
CSS变量（自定义属性）使用指南 — SitePoint

摘要：预处理器可以让你设置变量，并且在函数循环和数学操作等中使用。不同之处在于变量是运行在浏览器中的动态属性，而预处理器变量会被编译成普通的代码。变量提供了更多可能性但这并不是说你需要在二者之间选择其一你可以同时使用变量和预处理器变量的强大功能。 CSS预处理器，如Sass和Less，使得CSS代码易于组织和维护。通过提供变量、混合、循环等特性，使得CSS具有动态编写的能力，从而减少重复性工...

yankeys 2019-08-29 18:43 评论0 收藏0
CSS变量（自定义属性）实践指南

摘要：和这样的预处理器，让我们的代码保持良好的结构和可维护性。这是否意味着变量已经无关紧要了呢那可未必，主要是因为，变量与预处理器中的变量其实是不同的东西。而你是无法对预处理器中的变量做上面这些操作的。本文翻译自：https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 转载请注明出处：葡萄城官网，葡萄城...

番茄西红柿 2019-04-23 13:26 评论0 收藏0
CSS变量（自定义属性）实践指南

摘要：变量，或者用它的官方称谓，叫作自定义属性，已经可用，并且有非常棒的浏览器支持，而也正在取得进展。这是否意味着变量已经无关紧要了呢那可未必，主要是因为，变量与预处理器中的变量其实是不同的东西。转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 Sass和Less这样的预处理器，让我们的CSS代码保持良好的结构和可维护性。像变量、混合(mixin...

source 2019-08-29 16:33 评论0 收藏0