var
var() 函式用來獲取和使用 CSS 變數 （CSS Variables）
var( <custom-property-name> [, <declaration-value> ]? )
複製程式碼-
custom-property-name自定義屬性名，如以 '--' 開頭的自定義屬性，
--default-width -
declaration-value宣告值（候選值），如果自定義屬性值無效時，則使用該值替換
不能指定多個候選值，如：
var(--color, red, blue)，但可以通過巢狀函式實現，var(--color, var(--default-color, blue))
@apply
語法
:root {
--custom-property-name: {
prop-name: value;
/*...*/
}
}
@apply --custom-property-name;
複製程式碼用途
-
clearfix
:root { --clearfix: { display: table; clear: both; content: ''; }; } div:after{ @apply --clearfix; } 複製程式碼 -
overflow-ellipsis
:root { --mixin-overflow-ellipsis: { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }; } .overflow-box { @apply --mixin-overflow-ellipsis; } 複製程式碼 -
三角形
:root { --zero-size: { width: 0; height: 0; }; --triangle-to-bottom-size: 50px; --triangle-to-bottom-color: #007bff; --triangle-to-bottom: { @apply --zero-size; border-style: solid; border-width: var(--triangle-to-bottom-size) var(--triangle-to-bottom-size) 0 var(--triangle-to-bottom-size); border-color: var(--triangle-to-bottom-color) transparent transparent transparent; }; } .triangle-to-bottom { @apply --triangle-to-bottom; } 複製程式碼
相容性
目前沒有瀏覽器支援，Chrome 之前支援後來又移除
參考
CSS 變數
通過下面的方式來宣告變數：
--variable-name: variable-value;
複製程式碼變數名區分大小寫，變數值可以是顏色、字串、多個值的組合。
:root {
--main-color: #03a9f4;
--main-bg: rgb(255, 255, 255);
--logo-border-color: blue;
--header-height: 68px;
--content-padding: 10px 20px;
--base-line-height: 1.428571429;
--transition-duration: .35s;
--external-link: "external link";
--margin-top: calc(2vh + 20px);
--toolbar-theme: {
background-color: hsl(120, 70%, 95%);
border-radius: 4px;
border: 1px solid var(--theme-color late);
};
}
複製程式碼-
全域性變數
使用
:root作用域來定義全域性變數:root { --global-color: #03a9f4; } 複製程式碼 -
區域性變數
在特定的元素、類下定義變數
.hover { --color: #03a9f4; color: var(--color); } 複製程式碼 -
變數組合
.block { --text: 'Hello'; --content: var(--text)' World'; } 複製程式碼新宣告變數的值不能由已定義的變數計算而成
:root { --font-size: 1rem; --padding: 10px; } .font_size_medium { // 錯誤用法 --medium: var(--font-size)*1.5; font-size: var(--medium); // 正確用法 font-size: calc(var(--font-size)*1.5); } .padding_medium { padding: 0 0 calc(var(--padding)*1.5); } 複製程式碼 -
變數繼承
:root { --border: 1px; } .border-medium { --border: initial; --border: 1.5px; --border: inherit; } 複製程式碼
JS 獲取變數
在 JS 中可以通過 getPropertyValue() 和 setProperty() 來獲取和修改 CSS 變數值。
:root {
--color: #03a9f4;
}
// READ
const rootStyles = getComputedStyle(document.documentElement); // :root
const color = rootStyles.getPropertyValue('--screen-category').trim();
// WRITE
document.documentElement.style.setProperty('--color', '#03a9f4');
複製程式碼擴充套件
-
使用 CSS 變數時，只要語法正確也能正常解析；但如果變數值不合規，則會使用預設值替換
body { --color: 20px; background-color: #369; background-color: var(--color, #cd0000); // transparent } 複製程式碼 -
CSS 變數預設會尾隨一個空格，定義數字常量時需使用
calc()計算// 錯誤 body { --size: 20px; // 等同於 font-size:20 px 20 與 px 之間有個空格 font-size: var(--size); } // 正確 body { --size: 20; font-size: calc(var(--size) * 1px); } 複製程式碼 -
CSS 變數不能作為媒體查詢值使用
@media screen and (min-width: var(--breakpoint) {} 複製程式碼 -
CSS 變數不能用於圖片地址
background: url(var(--url)); // 無效 複製程式碼
用途
相容性
除 IE 外，其它瀏覽器均支援
檢測瀏覽器是否支援 CSS 自定義屬性
@supports((--c: 0)) {
/* 支援 */
}
@supports(not (--c: 0)) {
/* 不支援 */
}
複製程式碼if (CSS && CSS.supports && CSS.supports('--c', 0)) {
/* 支援 */
} else {
/* 不支援 CSS.supports() */
// https://gist.github.com/wesbos/8b9a22adc1f60336a699
const hasNativeCSSProperty = () => {
// https://csstriggers.com
const opacity = 1,
body = document.body;
let hasNativeCSSProperty = false;
body.style.setProperty('--opacity', opacity);
body.style.setProperty('opacity', 'var(--opacity)');
hasNativeCSSProperty = getComputerStyle(body).opacity === opacity;
body.style.setProperty('--opacity', '');
body.style.opacity = '';
return hasNativeCSSProperty;
}
if (hasNativeCSSProperty()) {
/* 支援 */
} else {
/* 不支援 */
}
}
複製程式碼