Day22：【技术篇】CSS 的变数运用技巧(1)

一、前言

  在 JavaScript 的世界里有变数，那初学者们也知道 CSS (阶层式样式表，Cascading Style Sheets)也有吗？以下内容以我工作上常用的做介绍与举例～

二、CSS 的变数运用技巧

1. 宣告css变数

  将会运用到的变数都放在 :root 选取器内，并且使用 --自订名称作为属性的方式来宣告变数。

:root {
  --primary: Aquamarine;
  --background-color: Teal;
}

2. 使用css变数

  取值的阶段，取值时前方依然是撰写我们需要套用的样式属性，後方再接着使用 var (--变数名称) 来套用。

body {
  background: var(--background-color);
}

3. 在RWD使用css变数

  制作响应式时，因为萤幕大小的不同通常会需要调整文字大小来符合需求，最常见的方式就是透过选取器一一覆盖字体大小，如果透过变数的方式就可以统一切换整体文字大小，不需要一一的调整每个选取器。

:root {
  --font-size: 14px;
}
/* 使用变数定义文字大小 */
p {
  font-size: var(--font-size);
}
/* 除此之外，还可以透过 calc 用相同变数做运算，让特定的文字更大获更小 */
h1 {
  font-size: calc(var(--font-size) * 1.5);
}
@media (min-width: 480px) {
  :root {
    --font-size: 18px;
  }
}

三、结论与自我鼓励

  我在初学网页设计时，最先接触到的是 HTML 和 CSS，但因为只是买初阶的线上课程，并未学得很深入，後来才知道还有选取器、变数和 SCSS 等这麽多实用技巧，可以不用写冗长的程序码，也能达到想要的样式编排效果，每学一点新的，真的就让我对做网页更有兴趣了！

本文同步发布於我的个人网站 Annie Code Life