套用屬性定義 var()

設定屬性 { ‘–自訂變數名稱’, ‘值’ }，並使用 var (–自訂變數名稱) 來套用屬性質。

/* css範例-宣告變數--main-bg-color */
:root {
  --main-bg-color: coral;
}

/* css範例-套用變數 */
#div1 {
  background-color: var(--main-bg-color);
}

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

/* css範例-多變數套用 */
:root {
  --main-bg-color: coral;
  --main-txt-color: blue;
  --main-padding: 15px;
}

#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

#div2 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

☞ 範例

/* css範例-RWD文字 */
:root {
  --font-size: 14px;
}

p {
  font-size: var(--font-size);
}

h1 {
  font-size: calc(var(--font-size) * 1.5);
}

@media (min-width: 480px) {
  :root {
    --font-size: 18px;
  }
}

/* css範例-漸層背景定義 */
:root {
  --c: 255;
}

body {
  background-image: linear-gradient(
    rgb(
      calc(var(--c) - 60),
      calc(var(--c) - 40),
      calc(var(--c))
    ),
    rgb(
      calc(var(--c) - 20),
      calc(var(--c) - 10),
      calc(var(--c))
    )
  );
}

/* css範例-整體設定 */
:root {
  --blue: #1e90ff;
  --white: #ffffff; 
}

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

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  --blue: #0000ff; /* 如設此值，此值會套用至所有button */
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}