CSS之變量var

• 變量是個好東西
• CSS變量var()文法
• • Question

變量是個好東西

在任何語言中，變量的有一點作用都是一樣的，那就是可以降低維護成本，附帶還有更高性能，檔案更高壓縮率的好處。

随着CSS預編譯工具Sass/Less/Stylus的關注和逐漸流行，CSS工作組迅速跟進CSS變量的規範制定，并且，很多浏覽器已經跟進，目前，在部分項目中已經可以直接使用了。

Chrome/Firefox/Safari浏覽器相容性明顯超于Opera/iOS

CSS變量var()文法

CSS中原生的變量定義文法是：

--*

，變量使用文法是：

var(--*)

，其中

*

表示我們的變量名稱。關于命名這個東西，各種語言都有些顯示，例如CSS選擇器不能是數字開頭，JS中的變量是不能直接數值的，但是，在CSS變量中，這些限制通通沒有

:root {
  --1: #369;
}
body {
  background-color: var(--1);/* #369 */
}
           

但是，不能包含

$，[，^，(，%

等字元，普通字元局限在隻要是“數字[

0-9

]”“字母[

a-zA-Z

]”“下劃線

_

”和“短橫線

-

”這些組合，但是可以是中文，日文或者韓文，例如：

body {
  --深藍: #369;
  background-color: var(--深藍);
}
           

是以，我們就可以直接使用中文名稱作為變量，即使英語4級沒過的小夥伴也不會有壓力了，我們也不需要随時挂個翻譯器在身邊了。

無論是變量的定義和使用隻能在聲明塊{}裡面，例如，下面這樣是無效的：

--深藍: #369;
body {
  background-color: var(--深藍);
}
           

變量的定義，或者說聲明跟CSS計數器的聲明類似的，你應該擺脫Sass/Less等預編譯工具文法先入為主的文法影響，把CSS的原生變量了解為一種CSS屬性。

這樣，你就對其權重和變量應用規則要容易了解地多。

Question

• CSS屬性名可以走變量嗎？不可以
• CSS變量支援同時多個聲明嗎？不可以

:root{
	--blue: #007bff;
 	--indigo: #6610f2;
  	--purple: #6f42c1;
  	--pink: #e83e8c;
  	--red: #dc3545;
  	--orange: #fd7e14;
  	--yellow: #ffc107;
  	--green: #28a745;
  	--teal: #20c997;
  	--cyan: #17a2b8;
  	--white: #fff;
  	--gray: #6c757d;
  	--gray-dark: #343a40;
  	--primary: #007bff;
  	--secondary: #6c757d;
  	--success: #28a745;
  	--info: #17a2b8;
  	--warning: #ffc107;
  	--danger: #dc3545;
  	--light: #f8f9fa;
  	--dark: #343a40;
  	--breakpoint-xs: 0;
  	--breakpoint-sm: 576px;
  	--breakpoint-md: 768px;
  	--breakpoint-lg: 992px;
  	--breakpoint-xl: 1200px;
  	--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  	--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

}