来轻松聊聊

终於来到基础CSS的最後一篇，这次要分享的是CSS的变量。
想像一个情境，你正在负责一个网页的视觉设计，而你需要在许多地方用上同样的颜色(如:暗红色DarkRed)。通常在设定颜色时，都必须输入正确的英文名称/16进位数字/rgba，这并不是方便的做法，而且可能会忘记如何表示。
因此，CSS提供了一个方便的方法，可将常用的属性值设定为自定义变量的值，需要使用时，在函数中放入变量名称，即可得到设定的属性值。这个做法不仅能避免开发中途忘记属性值的名称，若将变量名称设定简短一些，也能增进开发速度。

CSS变量

• 自定义一个CSS变量的格式为--变量名称: 属性值;。
• 使用变量的格式为属性: var(--变量名称);，亦即var(--变量名称) = 属性值。

范例

<!-- HTML -->
<p>我是酒红色</p>

<div id="wine-box"></div>
<!-- CSS -->
:root {
  --title: 25px;
  --wine: #8b0000;
}
p {
  font-size: var(--title);
  color: var(--wine);
}
div {
  height: 100px;
  weight: 200px;
  background: var(--wine);
}

显示效果如下

继承、作用域、优先度

• HTML为巢状结构，内层会继承外层所定义的属性值，包含变量。
• 通常会将变量定义在：root这个伪类别中。可以将其视为最外层、作用域最大，较不会受到影响。
• 变量和一般属性值相同，也有优先顺序的差别。

范例

<!-- HTML -->
<p>今天天气很好</p>
<h3>明天不会下雨</h3>
<!-- CSS -->
:root {
  --color: blue;
}
p {
  --color: gray;
  color: var(--color);
}
h3 {
  color: var(--color);
}

显示效果如下

默认值、兼容性

• 使用变量时，若不确定是否有定义变量或变量可能意外有误时，可以在後方加上一个默认值，避免出错，例：var(--SB, skyblue)。
• 由於浏览器种类众多，不同装置的浏览器版本又可能有所不同，为避免不支援CSS变量，可以在使用变量的前方加上原有的属性值，增加兼容性。

范例

:root {
  --title: darkgray;
}
h1 {
  color: darkgray; // 兼容性
  color: var(--title, darkgray); // 逗号後方为默认值
}

基础的部分到今天分享完毕，接下来有更进阶的内容，有任何问题也欢迎在下方与大家分享讨论哦！

内容来源：
freeCodeCamp|CodePen