https://developer.mozilla.org/en-US/docs/web/CSS/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 http://tabatkins.github.io/specs/css-apply-rule/
语法
- :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 之前支持后来又移除 https://www.chromestatus.com/feature/5753701012602880
https://caniuse.com/#search=@apply
参考
- CSS @apply rule (native CSS mixins) https://hospodarets.com/css_apply_rule#css-triangle-mixin
- CSS @apply rule spec http://tabatkins.github.io/specs/css-apply-rule/
CSS 变量 https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
通过下面的方式来声明变量:
--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)); // 无效
用途
主题切换 https://codepen.io/zhanghx/pen/BrXjQg
单个 CSS 属性用法 https://codepen.io/zhanghx/pen/xWvOqZ
RGB 颜色动态变化 https://hospodarets.com/demos/css-colors-from-custom-props/
兼容性
除 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 {
- /* 不支持 */
- }
- }
- https://caniuse.com/#search=css variables
参考
- CSS custom properties (native variables) In-Depth https://hospodarets.com/css_properties_in_depth
- CSS variables spec https://www.w3.org/TR/2015/CR-css-variables-1-20151203/
- Using CSS custom properties (variables) https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables#Values_in_JavaScript
深入学习 CSS 自定义属性 (CSS 变量) https://www.w3cplus.com/css3/css-properties-in-depth.html
来源: https://juejin.im/post/5ad4a1235188255caf06af38