學習CSS自訂屬性

標籤：any   自訂   定義   一個   全域   variable   title   root   post   

  css變數

今天看了阮一峰老師的部落格，看到一篇關於css變數的文章。。。自己在這邊整理一下。

1.聲明css變數：

　　body{　　　　　　　　　　

　　　--foo: #7F583F;
　　　--bar: #F7EFD2;

　　}  

　　用--來聲明變數，原因很簡單因為$foo被sass用掉了，@foo被less用掉了，所以css變數聲明選擇--foo。

　　注意：變數只能用作屬性值，不能用作屬性名稱。如：--foo：margin-top； --foo：20px  錯誤！！！

2.var()函數：一個參數var(--foo)用於讀取變數的值；兩個參數 var （--foo，#456798）時，第二個參數為預設值，當變數不存在時，使用預設值。

　　注意：第二個參數不處理內部的逗號和空格：

　　var（--foo，“tom”，“jack”），tom和jack為var（）的第二個參數。

　　var（--foo，10px 20px 15px），同理10px 20px 15px為第二個參數。

3.變數值的類型：變數為字串時可以與其他字串拼接。

　　--bar ："hello";

　　--foo : var(--bar)" world";

　　變數為數值時不能與單位直接連用，需要用calc（）函數進行拼接

　　--foo：20；

　　margin-top：var（--foo）px  //無效

　　margin-top：calc（var（--foo）*1px）； // 有效

　　變數帶有單位時，不能是字串，寫成字串無效。　　　　　　　　　　　　　　

　　/* 無效 */
　　.foo {
　　　　--foo: ‘20px‘;
　　　　font-size: var(--foo);
　　}

　　/* 有效 */
　　.foo {
　　　　--foo: 20px;
　　　　font-size: var(--foo);
　　}

4.變數的範圍：變數的範圍與css層疊樣式的規則一致　　　　　　　　　　　　　

　　<style>
　　　:root { --color: blue; }
　　　div { --color: green; }
　　　#alert { --color: red; }
　　　* { color: var(--color); }
　　　 </style>

　　　<p>blue</p>
　　　<div>green</div>
　　　<div id="alert">red</div>

　　全域變數通常放在 ：root {} 裡面

基本的文法就這些，詳情請看：http://www.ruanyifeng.com/blog/2017/05/css-variables.html。

學習CSS自訂屬性