css變量複用 全局變量-局部變量

前言

　　簡單使用場景：同一套後臺系統有多套主題的狀況下，主題色做爲一個最經常使用到的可複用的顏色，很是有必要像js的全局變量同樣存在全局變量中以做複用，以前我第一個想到的是sass的變量聲明，不曾想到css自己也能實現，在此記錄對己對人。

 

scss中的變量

　　1.變量聲明-引用

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//編譯後
nav {
  width: 100px;
  color: #F90;
}

 

css中使用

　　1. 全局變量

　　　　1.1變量聲明：

　　　　建議放在公共樣式中，例如：common.css，用來保存全局的通用樣式。

　　　　

:root{
  --cssName: value;
}

/* 例如： */
/* 支持駝峯命名、‘-’間隔 */
:root{
  --themeDefaultColor: #ccc;
  --theme-blue-color: blue;
}

　　　　1.2 變量使用：

:root{
  --cssName: value;
}

.selecter{
  cssName: var(--);
}

/* 例如： */
:root{
  --themeDefaultColor: #ccc;
}
.text{
  color: var(--themeDefaultColor)
}

 

　　2.局部變量

　　　　局部變量聲明，局部範圍內子元素均可使用該變量；

　　　　2.1變量聲明：

　　　　

#box{
  --cssName : value;
}

/* 例如： */
#parent{
  --fontSize: 14px;
}

　　2.2 變量使用：

#box{
  --cssname : value;
}

#box .child{
  color : var(--cssname)
}

 

總結：

　　css變量聲明能夠大量減小機械性書寫，減小代碼量，便於統一修改等好處，不過修改要注意影響到其餘全局變量，注意變量之間的引用關係。