CSS-自定义变量

使用背景：

一些常见的例子：

为风格统一而使用颜色变量
一致的组件属性（布局，定位等）
避免代码冗余

*更方便的从CSS向JS传递数据（例如媒体断点）

为什么使用：

以下几点是未来CSS属性的简短说明：

动态性，可以在运行时更改
可以方便的从JS中读/写
可继承，可组合，同时具有作用域

定义：

定义
用这样的方式来声明一个变量：--variable-name: variable-value;（变量名是大小写敏感的）。变量的值可以是颜色、字符串、多个值的组合等:

:root{
    --base_color:#398bd0;
    --bg_color:#4a4a4a;
}

为什么选择两根连词线（--）表示变量？

为什么选择两根连词线（--）表示变量？
$foo被 Sass 用掉了，
@foo被 Less 用掉了。
为了不产生冲突，官方的 CSS 变量就改用两根连词线了

用法：

.res_nav ul li:hover a{color:var(--base_color);}

.res_contact_btn a:hover{background:var(--base_color);}

作用域：

使用

:root

 作用域来定义全局变量：

:root{ --global-var: 'global'; }

如果想让某个变量只在部分元素/组件下可见，只需要在特定的元素下定义该变量：

<div class="block"> 
My block is 
    <div class="block__highlight">awesome</div> 
</div>

/*css文件*/
.block { --block-font-size: 1rem; font-size: var(--block-font-size); } 
.block__highlight { --block-highlight-font-size: 1.5rem; font-size: var(--block-highlight-font-size); }

媒体查询也可以提供作用域：

@media screen and (min-width: 1025px) { 
    :root { 
        --screen-category: 'desktop';
     } 
}    

下面一个例子来展示伪类下的作用域（例如，:hover）：

style="width: 100%;" title="自定义变量，伪类作用域示例" src="http://codepen.io/mengjielee/embed/BxXqJP/?height=335&theme-id=0&default-tab=html,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="335">

本文转载于:猿2048→https://www.mk2048.com/blog/blog.php?id=hii1aaaa&title=CSS-自定义变量