css變量

css變量

相信你們都用過CSS預處理，好比，less、scss(sass)。不可避免的會用到變量。 在less中是以 @ 定義變量； 在scss中是以 $定義變量； 而後在css中，也有變量，以-- 定義變量(兩根連線詞)

css變量的定義

一、語法：

--variableName: variableValue;
複製代碼

variableName表示自定義變量名，variableValue表示屬性值。

二、規範：

• 以「--」雙橫槓開頭，後面能夠是數字[0-9]、字母[a-zA-Z]、下劃線_和短橫線-這些組合，甚至是中文也行，但不能包含$、[、^、(、%等字符。
• 大小寫是敏感的
• 定義只能在聲明塊{}裏面

三、定義：

1.全局變量

:root

:root{
	--color: red;
}
複製代碼

2.局部變量(定義中html標籤上)

html{
	--html: red;
}
body{
	--body: blue;
}
div{
	--color1: green;
}
.div{
	--div: 20px;
}
#div{
	--line_height: 20px;
}
複製代碼

在html元素裏面的定義，當定義在html、body中的時候也是能夠當成全局使用的

四、示例：

body{
  	--1: red; /*數字*/
  	--background-color: blue; /*字母加-*/
  	--font_size: 20px;/*字母加_*/
  	--寬度: 100px;/*中文*/
  	--width: 100px; /*字母*/
}
複製代碼

css變量的使用

一、語法：

cssPropertyName: var(--variableName [, declarationValue]);
複製代碼

var()會返回--variableName的值，declarationValue表示默認值，也就是當--variableName沒有定義的時候，取declarationValue的值。

二、使用 var()：

使用上面示例的代碼

.div{
	width: var(--寬度)
}
.p1{
	font-size: var(--font_size)
}
.colora{
	color: var(--1)
}
.clac-width{
	width: calc(100% - var(--width));
}
.no-two-params{
	color: var(--nocolor, red)
}
複製代碼

css變量類型

一、當爲字符串時

:root{
	--text1: 'world';
  	--text2: 'hello 'var(--text1);
}
.div3:after{
	content: var(--text2)
}
複製代碼

二、當爲熟知時

:root{
	--num: 30;
}
.div3{
	font-size: var(--num)px; /*無效*/
	font-size: var(--num) + px; /*無效*/
	font-size: var(--num) + 'px'; /*無效*/
	
	font-size: calc(var(--num) * 1px); /*有效*/
}
複製代碼

三、變量帶單位

變量值帶有單位，就不能寫成字符串。

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

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

css變量做用域

同一個 CSS 變量，能夠在多個選擇器內聲明。讀取的時候，優先級最高的聲明生效。這與 CSS 的"層疊"（cascade）規則是一致的。

<style> * { color: var(--color); } :root { --color: blue; } div { --color: green; } #alert { --color: red; } </style>

<p>藍色</p>
<div>綠色</div>
<div id="alert">紅色</div>
複製代碼

css變量兼容性

一、@supports

@supports ( (--size: 0)) {
  /* 支持 */
}
@supports ( not (--size: 0)) {
 /* 不支持 */
}
複製代碼

二、javascript

if(window.CSS && window.CSS.supports && window.CSS.supports('--size', 0)) {
  /* 支持 */
}else{
  /* 不支持 */
}
複製代碼

三、瀏覽器支持

使用javascript操做css變量

// 設置變量
document.body.style.setProperty('--primary', '#7F583F');
// 讀取變量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'
// 刪除變量
document.body.style.removeProperty('--primary');
複製代碼