CSS進階之CSS變量

• 前言
• 基本用法
• 使用自定義屬性的第一步
• 自定義屬性的繼承
• 自定義屬性的回調值
• 有效性和值
• 無效的變量會發生什麼
• 經過js中獲取到的css變量值
• var()與rgba()配合實現複用變量
• vue實戰: 經過顏色選擇器切換熱力圖主題顏色

前言

自定義屬性（有時能夠稱爲CSS變量或者層疊variables）是由CSS做者定義的實體，這些實體在一個document內能夠被重用。通常按照自定義屬性的符號設置（好比，--main-color: black；）而後使用var()函數使用。（例如color: var(--main-color)）

複雜的網站有大量的CSS，一般會有不少重複的值。例如，同一個顏色可能會被在幾百個地方都用到，能夠從全局搜索去一次性替換掉。自定義屬性容許這個值存儲在一個地方，而後再多個地方引用。另外一個好處是語義標識符號。（semantic identifier）例如，--main-text-color比#00ff00更容易理解，尤爲是這個值在其餘的上下文中也存在時。

自定義屬性遵循級聯，會從父級繼承它們的值。

基本用法

定義一個自定義的屬性須要用--開始，而後屬性的值須要是一個有效的CSS值。
和任何其餘的屬性同樣，在一個規則集中定義：

element {
    --main-bg-color: brown;
}

請注意規則集中的選擇器定義了自定義屬性可使用的scope。一個一般的最佳實踐是定義在:root僞類上，從而能夠在HTML document全局得到權限：

:root {
    --main-bg-color: brown;
}

不過你也能夠在局部scope中使用css變量。

注意：css變量的屬性名大小寫敏感，--my-color會被看成--My-color屬性。

就像上面提到的，使用自定義屬性的話，須要在var()函數中使用。

element {
    background-color: var(--main-bg-color);
}

使用自定義屬性的第一步

在不一樣的class中應用相同的顏色。

.one {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 100px;
}

.five {
  background-color: brown;
}

<div>
  <div class="one">1:</div>
  <div class="two">2: Text <span class="five">5 - more text</span></div>
  <input class="three">
  <textarea class="four">4: Lorem Ipsum</textarea>
</div>

注意css中的重複部分，背景色屢次用到，能夠聲明一個css變量。不過通常仍是在:root上使用：

:root {
    --main-bg-color: brown;
}
.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 100px;
}

.five {
  background-color: var(--main-bg-color);
}

自定義屬性的繼承

自定義屬性會繼承。這也就意味着若是給定的element沒有屬性值，會繼承父元素的值：

.two {
    --test: 10px;
}
.three {
    --test: 2em;
}

<div class="one"> <!--invalid-->
  <div class="two"><!--10px-->
    <div class="three"></div><!--2em-->
    <div class="four"></div><!--10px-->
  </div>
</div>

不要試圖把它當作一個和其餘語言中的變量同樣的東西，css自定義屬性最終展示形式是computed值，因此不要妄想去子樣式中查找到這個變量。自定義屬性僅僅對匹配到的選擇器和它的子元素有效，和普通css同樣。

自定義屬性的回調值

使用var()的時候，可使用回調函數。
var()函數不只僅能夠用於默認的標籤，對於自定義的標籤和Shadow DOM都適用。

注意：fallback可用於提高兼容性。

規則能夠看下面的例子：

.two {
  color: var(--my-var, red); /* Red if --my-var is not defined */
}

.three {
  background-color: var(--my-var, var(--my-background, pink)); /* pink if --my-var and --my-background are not defined */
}

.three {
  background-color: var(--my-var, --my-background, pink); /* Invalid: "--my-background, pink" */
}

注意：

• 第二種可能會有性能問題，由於要不斷地一層一層往下找。
• 第一個例子中的var(--my-var, red)還能夠寫成var(--my-var, red, blue)。

有效性和值

與每一個屬性相關的經典CSS有效性概念在定製屬性方面不是頗有用。當解析自定義屬性的值時，瀏覽器不知道將在何處使用它們，所以必須考慮幾乎全部值都是有效的。不幸的是，這些有效值能夠經過var()函數表示法在可能沒有意義的上下文中使用。屬性和自定義變量可能致使無效的CSS語句，從而致使在計算時間有效的新概念。

無效的變量會發生什麼

1. 檢查是否有父元素能夠繼承
2. 設置成默認的初始值

好比這個例子：

<p>This paragraph is initial black.</p> 
:root { --text-color: 16px; } 
p { color: blue; } 
p { color: var(--text-color); }

這個例子中的p的color屬性應用了var函數，可是16px是color的無效屬性值。所以找父元素，可是沒有父元素，因此這個color的值替換爲default initial value，替換之後這個屬性就恢復爲默認屬性了。

注意：雖然CSS屬性/值對中的語法錯誤將致使該行被忽略。可是使用級聯值、無效替換(使用無效的自定義屬性值)不會被忽略，從而致使該值被繼承。

經過js中獲取到的css變量值

// 從行內樣式中中獲取變量
element.style.getPropertyValue("--my-var");
// 從任何地方獲取到變量
getComputedStyle(element).getPropertyValue("--my-var");
// 在行內樣式中設置變量
element.style.setProperty("--my-var", jsVar + 4);

var()與rgba()配合實現複用變量

:root {
  --my-var: 24, 144, 255;
}

.custom-bg-1 {
  background-color: rgba(var(--my-var), 0.5);
}

.custom-bg-2 {
  background-color: rgba(var(--my-var), 0.7);
}

vue實戰: 經過顏色選擇器切換熱力圖主題顏色

基於iView的ColorPick組件，實現用戶根據本身的喜愛切換主題色。
heat.scss

:root {
  --heat-cell-bgc: 24, 144, 255;
}

.custom-alpha-8-1 {
  background-color: rgba(var(--heat-cell-bgc), 0.125) !important;
}
.custom-alpha-8-2 {
  background-color: rgba(var(--heat-cell-bgc), 0.25) !important;
}
...
.custom-alpha-8-8 {
  background-color: rgba(var(--heat-cell-bgc), 1) !important;
}

colorFilter.vue

<template>
  <div>
    <ColorPicker
      v-model="cellBackgroundColor"
      placement="bottom-start"
      @on-change="colorChange"
      format="rgb"
    />
  </div>
</template>

<script>
const getRGB = (str) => {
  const match = str.match(/rgba?\((\d{1,3}), ?(\d{1,3}), ?(\d{1,3})\)?(?:, ?(\d(?:\.\d?))\))?/);
  return match
    ? {
        red: match[1],
        green: match[2],
        blue: match[3],
      }
    : {};
};

export default {
  name: 'color-filter',
  data() {
    return {
      cellBackgroundColor: 'rgb(24, 144, 255)',
    };
  },
  methods: {
    colorChange(color) {
      // 抽離出rgb值
      const { red, green, blue } = getRGB(color);
      const rgb = `${red},${green},${blue}`;
      // 找到root元素
      const rootElement = document.documentElement;
      // 更新背景色css變量
      rootElement.style.setProperty('--heat-cell-bgc', rgb);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

參考連接：

• Using CSS custom properties (variables)
• https://www.iviewui.com/compo...
• https://stackoverflow.com/que...
• https://stackoverflow.com/que...