使用背景：

一些常見的例子：為風格統一而使用顏色變量 一致的組件屬性（布局，定位等） 避免代碼冗余*更方便的從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-自定義變量

總結

以上是生活随笔為你收集整理的CSS-自定义变量的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。