关于css:CSS-自定义属性变量-variables

自定义属性(有时候也被称作CSS 变量或者级联变量)是由 CSS 开发者自行定义的,它蕴含的值能够在整个文档中重复使用。由自定义属性标记设定值(比方: –main-color: black;),由 var() 函数来获取值(比方: color: var(–main-color);)简单的网站都会有大量的 CSS 代码,通常也会有许多反复的值。

根本用法

申明一个自定义属性,属性名须要以两个减号(--)开始,属性值则能够是任何无效的 CSS 值。和其余属性一样,自定义属性也是写在规定集之内的,如下:

element {
  --main-bg-color: brown;
}

所定义自定义属性须要在其可见作用域内(即被嵌套的标签内应用),通常的最佳实际是定义在根伪类 :root 下,这样就能够在 HTML 文档的任何中央拜访到它了:

:root {
  --main-bg-color: brown;
}

相干知识点

var() 函数

var()函数能够代替元素中任何属性中的值(value)的任何局部。

var()办法的第一个参数是要替换的自定义属性的名称。函数的可选第二个参数用作回退值。如果第一个参数援用的自定义属性有效,则该函数将应用第二个值。

<var()> = var( <custom-property-name> , <declaration-value>)

举个栗子

/* 后备值 */

/* 在父元素款式中定义一个值 */
.component {
  --text-color: #080; /* header-color 并没有被设定 */
}

/* 在 component 的款式中应用它: */
.component .text {
  color: var(--text-color, black); /* 此处 color 失常取值 --text-color */
}
.component .header {
  color: var(--header-color, blue); /* 此处 color 被回退到 blue */
}

个性

  • 继承:自定义属性会继承。这意味着如果在一个给定的元素上,没有为这个自定义属性设置值,在其父元素上的值会被应用。
  • 备用值嵌套:var()自身能够作为第二个值进行有限嵌套

    .three {
      background-color: var(--my-var, var(--my-background, pink)); 
    }

    这样写可能会导致性能问题,因为它花了更多的工夫在解决这些变量上。

  • 有效性:当自定义属性值被解析,浏览器不晓得它们什么时候会被应用,所以必须认为这些值都是无效的。然而真实情况是,只有当var()函数调用的时候能力晓得这些值的有效性,即计算时有效性
  • 有效状况:先会查看属性 color 是否为继承属性,如果不是则将该值设置为它的默认初始值

:root 伪类

:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说,:root 示意 \<html> 元素,除了优先级更高之外,与 html 选择器雷同。实际中次要用于申明全局CSS变量。

与Less和Sass变量的区别

申明

LESS用@符号,SCSS用$符号示意

@link-color:#000
@main-top : search;
$to-color:#000
$main-top : search;

应用

不同于CSS,申明变量以“插值”的模式应用,并且岂但能够示意为数值,文本嵌入表达式,还能够作为类名、属性名等。

@myColor: red;

h1 {
  @myColor: green;   // 只在 h1 外头有用,部分作用域
  color: @myColor;
}

[email protected]{myColor}{
    background-color: red
}

@url-prefix: "http://XXXX";

.test {
  background: url("@{url-prefix}/images/picutre001.png") no-repeat;
}
$myColor: red;

h1 {
  $myColor: green;   // 只在 h1 外头有用,部分作用域
  color: $myColor;
}

// 变量用#{}包裹
.#{$myColor}{
    background-color: red
}

$url-prefix: "http://XXXX";

.test {
  background: url("#{$url-prefix}/images/picutre001.png") no-repeat;
}

Less和Sass作用域规定不同

Less-作用域

@color: #00c; /* 蓝色 */
#header {
  @color: #c00; /* red */
  border: 1px solid @color; /* 红色边框 */
}

#footer {
  border: 1px solid @color; /* 蓝色边框 */
}

Less-作用域编译后

#header{border:1px solid #cc0000;}
#footer{border:1px solid #0000cc;}

scss-作用域

$color: #00c; /* 蓝色 */

#header {
  $color: #c00; /* red */
  border: 1px solid $color; /* 红色边框 */
}

#footer {
  border: 1px solid $color; /* 蓝色边框 */
}

Sass-作用域编译后

#header{border:1px solid #c00}
#footer{border:1px solid #c00}

Less辨别上下级作用域,应用与原生CSS var() 统一的作用域规定,SCSS为就近准则,即至顶向下的转换规则。

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据