CSS變量 var()
CSS 變量是由CSS作者定義的實體，其中包含要在整個文檔中重復使用的特定值。使用自定義屬性來設置變量名，并使用特定的 var() 來訪問。（比如 color: var(--main-color);）。
基本用法
CSS變量定義的作用域只在定義該變量的元素及其后代元素中有效。如果需要在整個頁面中使用該變量，可以將其定義在:root中
聲明一個局部變量：
element {--main-bg-color: brown;
}使用一個局部變量：
element {background-color: var(--main-bg-color);
}Mdn Web Docs
聲明一個?全局?CSS 變量：
:root {--global-color: #666;--pane-padding: 5px 42px;
}使用一個?全局?CSS 變量：
.demo{color: var(--global-color);}開始使用CSS變量
讓我們從這個簡單的例子開始，擁有不同類名的元素有相同的顏色：
.one {color: white;background-color: brown;margin: 10px;width: 50px;height: 50px;display: inline-block;
}.two {color: white;background-color: black;margin: 10px;width: 150px;height: 70px;display: inline-block;
}
.three {color: white;background-color: brown;margin: 10px;width: 75px;
}
.four {color: white;background-color: brown;margin: 10px;width: 100px;
}.five {background-color: brown;
}把它應用到下面這段HTML：
<div><div class="one"></div><div class="two">Text <span class="five">- more text</span></div><input class="three"><textarea class="four">Lorem Ipsum</textarea>
</div>注意CSS中重復的地方，brown的背景色作用在不同的元素上面。我們可以將背景色定義在更高的層級，然后通過CSS繼承解決這個問題。在某些情況下，這種方法不一定可行。定義一個變量在:root偽類上，使用變量來減少重復的代碼
:root {--main-bg-color: brown;
}.one {color: white;background-color: var(--main-bg-color);margin: 10px;width: 50px;height: 50px;display: inline-block;
}.two {color: white;background-color: black;margin: 10px;width: 150px;height: 70px;display: inline-block;
}
.three {color: white;background-color: var(--main-bg-color);margin: 10px;width: 75px;
}
.four {color: white;background-color: var(--main-bg-color);margin: 10px;width: 100px;
}.five {background-color: var(--main-bg-color);
}只需要規范地聲明所需的屬性，就能得到和上面例子相同的結果
CSS變量的繼承
自定義屬性同樣支持繼承。一個元素上沒有定義自定義屬性，該自定義屬性的值會繼承其父元素：
<div class="one"><div class="two"><div class="three"></div><div class="four"></div><div>
</div>定義下面的CSS：
.two { --test: 10px; }
.three { --test: 2em; }在這個例子中，var(--test)的結果是：
class="two"對應的節點:10pxclass="three" 對應的節點: element:2emclass="four"對應的節點:10px(inherited from its parent)class="one"對應的節點: 無效值, 即此屬性值為未被自定義css變量覆蓋的默認值
在JS中修改變量
// 獲取根元素
var r = document.querySelector(':root');// 創建獲取變量值的函數
function myFunction_get() {// Get the styles (properties and values) for the rootvar rs = getComputedStyle(r);// Alert the value of the --blue variablealert("The value of --blue is: " + rs.getPropertyValue('--blue'));
}// 創建設置變量值的函數
function myFunction_set() {// Set the value of variable --blue to another value (in this case "lightblue")r.style.setProperty('--blue', 'lightblue');
}在Vue中配合數據動態修改css變量
<template><div><span v-for="item in list" :style="{'--text': item.text, '--color': item.color}"></span></div>
</template><script>
export default {name: '',components: {},props: {},data() {return {list: [{ text: '"中"', color: 'red' },{ text: '"華"', color: 'orange' },{ text: '"人"', color: 'yellow' },{ text: '"民"', color: 'orange' },{ text: '"共"', color: 'green' },{ text: '"和"', color: 'cyan' },{ text: '"國"', color: 'blue' }]};}
};
</script><style lang="scss" scoped>
span::after {content: var(--text);background-color: var(--color);
}
</style>
@property
使用模板：
-
@property --property-name 中的 --property-name 就是自定義屬性的名稱，定義后可在 CSS 中通過 var(--property-name) 進行引用
-
syntax：該自定義屬性的語法規則，也可以理解為表示定義的自定義屬性的類型
-
支持的 syntax 語法類型:
- length
- number
- percentage
- length-percentage
- color
- image
- url
- integer
- angle
- time
- resolution
- transform-list
- transform-function
- custom-ident (a custom identifier string)
-
syntax 中的?
+、#、|?符號syntax: '<color>#'：接受逗號分隔的顏色值列表 --img-url:url(img01.png),url(img02.png);syntax: '<length>+'：接受以空格分隔的長度值列表 --padding:0 10px;syntax: '<length> | <length>+'：接受單個長度或者以空格分隔的長度值列表syntax: '<percentage> | <angle>';?使用百分比也可以使用角度
-
-
inherits：是否允許繼承
-
initial-value：初始值
<style>
@property --property-name {syntax: '<color>';inherits: false;initial-value: #fff;
}p {color: var(--property-name);
}
</style>在?script?中使用?CSS.registerProperty
<script>
CSS.registerProperty({name: "--property-name",syntax: "<color>",inherits: false,initialValue: "#c0ffee"
});
</script>示例
使用 linear-gradient 實現 transition 效果，但是 transition 并不會對 linear-gradient 生效
原代碼
<style>.line {margin: 0 auto;width: 300px;height: 24px;border: 1px solid rgba(128, 128, 128, 0.14);border-radius: 12px;box-sizing: border-box;background: linear-gradient(to right, #00ffc8 0, #ffffff 0);transition: all 0.3s;&:hover {background: linear-gradient(to right, #00ffc8 0, #ffffff 260px);}}</style><div class="line"></div>
使用 @property 修改后
<style>@property --l {syntax: "<length>";inherits: false;initial-value: 0;}.line {--l: 0px;margin: 0 auto;width: 300px;height: 24px;border: 1px solid hsla(0, 0%, 50%, 0.137);border-radius: 12px;box-sizing: border-box;background: linear-gradient(to right, #00ffc8 0, #ffffff var(--l));transition: --l 0.3s;&:hover {--l: 260px;}}</style><div class="line"></div>
CSS變量和@property - 掘金
