CSS变量教程,变量教程

CSS 变量教程

2017/05/10 · CSS ·
变量

原稿出处:
阮一峰   

当年十3月,微软宣布
艾德ge 浏览器将支撑 CSS 变量。

以此根本的 CSS
新功能,全数重点浏览器已经都扶助了。本文全面介绍怎么样选取它,你会发现原生
CSS 从此变得特别强硬。

亚洲必赢官网 1

今年二月,微软宣布 艾德ge
浏览器将支撑 CSS 变量。

转自:阮一峰的互联网日志

原稿地址:http://www.ruanyifeng.com/blog/2017/05/css-variables.html

一 、变量的宣示

宣示变量的时候,变量名前面要加两根连词线(--)。

CSS

body { –foo: #7F583F; –bar: #F7EFD2; }

1
2
3
4
body {
  –foo: #7F583F;
  –bar: #F7EFD2;
}

下面代码中,body选取器里面阐明了两个变量:--foo--bar

它们与colorfont-size等规范属性没有怎么分裂,只是没有默许含义。所以
CSS 变量(CSS variable)又称之为“CSS 自定义属性”(CSS custom
properties)。因为变量与自定义的 CSS 属性其实是3次事。

您大概会问,为何采纳两根连词线(--)表示变量?因为$foo被 Sass
用掉了,@foo被 Less 用掉了。为了不发生抵触,官方的 CSS
变量就改用两根连词线了。

各个值都得以放入 CSS 变量。

CSS

:root{ –main-color: #4d4e53; –main-bg: rgb(255, 255, 255);
–logo-border-color: rebeccapurple; –header-height: 68px;
–content-padding: 10px 20px; –base-line-height: 1.428571429;
–transition-duration: .35s; –external-link: “external link”;
–margin-top: calc(2vh + 20px); }

1
2
3
4
5
6
7
8
9
10
11
12
13
:root{
  –main-color: #4d4e53;
  –main-bg: rgb(255, 255, 255);
  –logo-border-color: rebeccapurple;
 
  –header-height: 68px;
  –content-padding: 10px 20px;
 
  –base-line-height: 1.428571429;
  –transition-duration: .35s;
  –external-link: "external link";
  –margin-top: calc(2vh + 20px);
}

变量名大小写敏感,--header-color--Header-Color是四个不等变量。

以此重庆大学的 CSS
新效能,全数重点浏览器已经都援救了。本文周到介绍怎样利用它,你会发现原生
CSS 从此变得那三个强硬。

原稿链接:www.ruanyifeng.com/blog/2017/05/css-variables.html

变量的宣示

注解变量的时候,变量名前面要加两根连词线(–)。

body{
  --foo:#fff;
  --bar:#f00;
}

body采纳器里面证明了四个变量:–foo和–bar。
它们与color、font-size等就是属性没有怎么不容,只是没有暗中同意值。所以css变量又叫做‘css自定义属性’。
种种值都得以放入 CSS 变量。

:root{
  --main-color:#4d4w53;
  --main-bg: rgb(255,255,255);
  --header-height: 68px;
  --content-padding:10px 20px;
}

:root 这个 CSS
伪类匹配文书档案树的根成分。对于
HTML 来说,:root 表示
<html>
元素,除了优先级更高之外,与
html 拔取器相同。

二、var() 函数

var()函数用于读取变量。

CSS

a { color: var(–foo); text-decoration-color: var(–bar); }

1
2
3
4
a {
  color: var(–foo);
  text-decoration-color: var(–bar);
}

var()函数还足以利用首个参数,表示变量的私下认可值。若是该变量不设有,就会采取那一个暗中认可值。

CSS

color: var(–foo, #7F583F);

1
color: var(–foo, #7F583F);

第一个参数不处理之中的逗号或空格,都作为参数的一有的。

CSS

var(–font-stack, “Roboto”, “Helvetica”); var(–pad, 10px 15px 20px);

1
2
var(–font-stack, "Roboto", "Helvetica");
var(–pad, 10px 15px 20px);

var()函数还是能够用在变量的宣示。

CSS

:root { –primary-color: red; –logo-text: var(–primary-color); }

1
2
3
4
:root {
  –primary-color: red;
  –logo-text: var(–primary-color);
}

留神,变量值只能用作属性值,不能够用作属性名。

CSS

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

1
2
3
4
5
.foo {
  –side: margin-top;
  /* 无效 */
  var(–side): 20px;
}

地方代码中,变量--side用作属性名,那是无效的。

亚洲必赢官网 2

 

变量的读取

var()函数用于读取变量。

a{
  color: var(--foo);
}

var()函数仍是能够使用第二个参数,表示变量的暗中同意值,假使该变量不存在,就会使用那些私下认可值。

color: var(--foo,#7f583f)

变量名只可以用作属性值,无法用作属性名。

叁 、变量值的档次

万一变量值是三个字符串,能够与别的字符串拼接。

CSS

–bar: ‘hello’; –foo: var(–bar)’ world’;

1
2
–bar: ‘hello’;
–foo: var(–bar)’ world’;

运用那或多或少,能够 debug(例子)。

CSS

body:after { content: ‘–screen-category : ‘var(–screen-category); }

1
2
3
body:after {
  content: ‘–screen-category : ‘var(–screen-category);
}

借使变量值是数值,不可能与数值单位直接连用。

CSS

CSS变量教程,变量教程。.foo { –gap: 20; /* 无效 */ margin-top: var(–gap)px; }

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

上面代码中,数值与单位一向写在一块,那是无济于事的。必须运用calc()函数,将它们总是。

CSS

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

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

比方变量值带有单位,就不可能写成字符串。

CSS

/* 无效 */ .foo { –foo: ’20px’; font-size: var(–foo); } /* 有效 */
.foo { –foo: 20px; font-size: var(–foo); }

1
2
3
4
5
6
7
8
9
10
11
/* 无效 */
.foo {
  –foo: ’20px’;
  font-size: var(–foo);
}
 
/* 有效 */
.foo {
  –foo: 20px;
  font-size: var(–foo);
}

① 、变量的表明

扬言变量的时候,变量名前边要加两根连词线(--)。

body {
–foo: #7F583F;
–bar: #F7EFD2;
}

位置代码中,body选用器里面注解了四个变量:--foo--bar

它们与colorfont-size等正规属性没有何分裂,只是没有暗许含义。所以
CSS 变量(CSS variable)又称为”CSS 自定义属性”(CSS custom
properties)。因为变量与自定义的 CSS 属性其实是二遍事。

你恐怕会问,为何选拔两根连词线(--)表示变量?因为$foo被 Sass
用掉了,@foo被 Less 用掉了。为了不产生争持,官方的 CSS
变量就改用两根连词线了。

各样值都得以放入 CSS 变量。

:root{
–main-color: #4d4e53;
–main-bg: rgb(255, 255, 255);
–logo-border-color: rebeccapurple;

–header-height: 68px;
–content-padding: 10px 20px;

–base-line-height: 1.428571429;
–transition-duration: .35s;
–external-link: “external link”;
–margin-top: calc(2vh + 20px);
}

变量名大小写敏感,--header-color--Header-Color是七个例外变量。

当年7月,微软公告 艾德ge 浏览器将扶助 CSS 变量。

变量值的体系

四、作用域

同1个 CSS
变量,能够在多个接纳器内注解。读取的时候,优先级最高的注脚生效。这与 CSS
的”层叠”(cascade)规则是千篇一律的。

上边是二个例子。

蓝色

绿色

红色

上边代码中,八个采用器都声称了--color变量。分化因素读取那一个变量的时候,会接纳优先级最高的平整,由此三段文字的颜色是不等同的。

那么,变量的效用域正是它所在的选拔器的有效性限制。

CSS

body { –foo: #7F583F; } .content { –bar: #F7EFD2; }

1
2
3
4
5
6
7
body {
  –foo: #7F583F;
}
 
.content {
  –bar: #F7EFD2;
}

地点代码中,变量--foo的功效域是body选拔器的见效范围,--bar的效用域是.content选取器的生效范围。

出于那些原因,全局的变量平时位于根成分:root当中,确认保障其余选取器都足以读取它们。

CSS

:root { –main-color: #06c; }

1
2
3
:root {
  –main-color: #06c;
}

二、var() 函数

var()函数用于读取变量。

a {
color: var(–foo);
text-decoration-color: var(–bar);
}

var()函数还足以采纳第三个参数,表示变量的私下认可值。假设该变量不存在,就会动用那么些暗许值。

color: var(–foo, #7F583F);

其次个参数不处理在那之中的逗号或空格,都看成参数的一局地。

var(–font-stack, “Roboto”, “Helvetica”);
var(–pad, 10px 15px 20px);

var()函数还是可以用在变量的扬言。

:root {
–primary-color: red;
–logo-text: var(–primary-color);
}

专注,变量值只好用作属性值,不能够用作属性名。

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

地方代码中,变量--side用作属性名,那是对事情没有什么帮助的。

以此根本的 CSS
新作用,全数重点浏览器已经都帮助了。本文周密介绍怎么着行使它,你会意识原生
CSS 从此变得老大强硬。

字符串

若果变量值是三个字符串,能够与此外字符串拼接。

--bar: 'hello';
--foo: var(bar)' world'

五 、响应式布局

CSS 是动态的,页面包车型地铁别的变更,都会造成接纳的规则变更。

行使那个特点,能够在响应式布局的media一声令下里面注明变量,使得分化的荧屏宽度有两样的变量值。

CSS

body { –primary: #7F583F; –secondary: #F7EFD2; } a { color:
var(–primary); text-decoration-color: var(–secondary); } @media screen
and (min-width: 768px) { body { –primary: #F7EFD2; –secondary:
#7F583F; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
body {
  –primary: #7F583F;
  –secondary: #F7EFD2;
}
 
a {
  color: var(–primary);
  text-decoration-color: var(–secondary);
}
 
@media screen and (min-width: 768px) {
  body {
    –primary:  #F7EFD2;
    –secondary: #7F583F;
  }
}

叁 、变量值的体系

只要变量值是二个字符串,能够与其余字符串拼接。

–bar: ‘hello’;
–foo: var(–bar)’ world’;

应用那或多或少,能够 debug(例子)。

body:after {
content: ‘–screen-category : ‘var(–screen-category);
}

借使变量值是数值,不能够与数值单位间接连用。

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

地点代码中,数值与单位直接写在共同,那是无用的。必须利用calc()函数,将它们总是。

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

一经变量值带有单位,就不可能写成字符串。

/ 无效 /
.foo {
–foo: ’20px’;
font-size: var(–foo);
}

/ 有效 /
.foo {
–foo: 20px;
font-size: var(–foo);
}

 

数值

要是变量值是数值,不能够与数值单位平昔连用。必须使用calc()函数,将它们总是。

--gap: 20;
margin-top: var(--gap)px; //无效
margin-top: calc(var(--gap)*1px)

假使变量值带有单位,就不能写成字符串。

/* 无效 */
.foo {
  --foo: '20px';
  font-size: var(--foo);
}

/* 有效 */
.foo {
  --foo: 20px;
  font-size: var(--foo);
}

6、包容性处理

对此不扶助 CSS 变量的浏览器,能够利用上边包车型客车写法。

CSS

a { color: #7F583F; color: var(–primary); }

1
2
3
4
a {
  color: #7F583F;
  color: var(–primary);
}

也足以运用@support指令举行检查和测试。

CSS

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

1
2
3
4
5
6
7
@supports ( (–a: 0)) {
  /* supported */
}
 
@supports ( not (–a: 0)) {
  /* not supported */
}

四、作用域

同三个 CSS
变量,能够在八个选项器内证明。读取的时候,优先级最高的宣示生效。那与 CSS
的”层叠”(cascade)规则是一律的。

上面是三个例子。