CSS ?? ??? ???, ???? ???????.
?? ???? var()? ????? ???????. ??? ? ?? ?? ?:

• CSS ??? ??? ?????
• ??? ?? ?? ??? ?? ?? CSS ?? ?? ??

var() ??

var()? ??? ?? ?? ?(CSS ??)? ??????. ??? ??? ????.

var( <custom-property-name>, <fallback-value>? )

?? ??

1. ? ?? ????? CSS ???? ???. var(20px)? ?? ???? ?? ??? ?????. var()? ??? ?? ?? ??? ???? ?????.

2. var()? ?? ??? ??? ? ????. ?, var(--prop-name): 20px; var()? ?? ??? ????? ???? ?? ?????.
   

.foo {
  margin: var(20px); /* Error, 20px is not a CSS variable */

  --prop-name: margin-top;
  var(--prop-name): 20px; /* Error, cannot use var() this way */
}

??? ??

1. var(--b, fallback_value) ??: ? ?? ????? --b? ???? ?? ?? ???? ?? ? ??? ???.

2. var(--c,) ? ?? ??: ?? ?? ?? ?? ?? ??? ??? ??? ???? --c? ???? ?? ?? ????? ? ?? ?????. .

3. ?? ??: var(--d, var(--e), var(--f), var(--g))?? ? ?? ?? ?? ?? ??? ??? ????. ???? ????? --d? ???? ?? ?? var() ???? var(--e), var(--f), var(--g)? ??? ???? ???? ??? ?????.

4. ??? CSS ?????? var(): ? ??? 20px?? ??? CSS ?? ??? ???. ??? var(--size)var(--unit)? 20px? ???? ??? ???? ?? ??? ?????.

5. CSS ??? ??? ??: CSS ??? ???? ???? ?? ??? ???? ??? ?????. ???? ??? ????? fallback? ???? ???.

6. url() ? var() ???: url()? ??? CSS ???? ????? ?? ??? ?? url()? ???? ???.
   

:root {
  /* 1. */
  margin: var(--b, 20px); /* Uses 20px if --b is invalid */

  /* 2. */
  padding: var(--c,) 20px; /* Falls back to 20px if --c is invalid */

  /* 3. */
  font-family: var(--fonts, "lucida grande", tahoma, Arial); /* Uses fallback font stack if --fonts is invalid */

  /* 4. */
  --text-size: 12;
  --text-unit: px;
  font-size: var(--text-size)var(--text-unit); /* Invalid, as it does not resolve to 12px */

  /* 5. */
  --initialized: initial;
  background: var(--initialized, initial); /* Results in background: initial */

  /* 6. */
  --invalid-url: "https://useme.medium.com";
  background: url(var(--invalid-url)); /* Invalid, as url() cannot parse var() */

  --valid-url: url(https://useme.medium.com);
  background: var(--valid-url); /* Correct usage */
}

?? ??? ? ??

CSS ??? ?? CSS ??? ????? ?? ? ???? ?? CSS ?? ??? ????. ??? ??? CSS ??? ?? ??? ???? ???? ?? ??? ??? ?????.

?? ? ?? ??:
:root? ??? ??? ????? ???? ??, ???? ??? ??? ??? ? ??????.

   :root {
     --main-color: blue; /* Globally applied */
   }

   .container {
     --main-color: green; /* Scoped, applies only within .container */
   }

???? ?? ????:
? ?? ???? CSS ??? ?? ? ?? ???? ??????.

var( <custom-property-name>, <fallback-value>? )

.foo {
  margin: var(20px); /* Error, 20px is not a CSS variable */

  --prop-name: margin-top;
  var(--prop-name): 20px; /* Error, cannot use var() this way */
}

? ??? .box? --green: 0?? ????? ?? -- background? rgb(255, 255, 255)? ??????? .box? ???? ???? ?????.

?? ???? ???? ?? ???:
??? ??? ???? ?? ??? ??? ?? ??? ?????.

:root {
  /* 1. */
  margin: var(--b, 20px); /* Uses 20px if --b is invalid */

  /* 2. */
  padding: var(--c,) 20px; /* Falls back to 20px if --c is invalid */

  /* 3. */
  font-family: var(--fonts, "lucida grande", tahoma, Arial); /* Uses fallback font stack if --fonts is invalid */

  /* 4. */
  --text-size: 12;
  --text-unit: px;
  font-size: var(--text-size)var(--text-unit); /* Invalid, as it does not resolve to 12px */

  /* 5. */
  --initialized: initial;
  background: var(--initialized, initial); /* Results in background: initial */

  /* 6. */
  --invalid-url: "https://useme.medium.com";
  background: url(var(--invalid-url)); /* Invalid, as url() cannot parse var() */

  --valid-url: url(https://useme.medium.com);
  background: var(--valid-url); /* Correct usage */
}

---

???? CSS ??? ?? ? ?? ?? ?? ??? ???????.

?? ? A: ?????

CSS ??? ????? ??? ??? ??? ? ?? ??? ?? ?????? ??? ? ????. ? ??? ????? @property? ???? ??? ??? ?? ?? ???? ????? ??? ?????? ???? ??? ??? ? ????.

   :root {
     --main-color: blue; /* Globally applied */
   }

   .container {
     --main-color: green; /* Scoped, applies only within .container */
   }

   :root {
     --main-color: blue;
   }

   .section {
     --main-color: green; /* Overrides :root definition */
   }

   .section p {
     color: var(--main-color); /* Shows green */
   }

   p {
     color: var(--main-color); /* Shows blue */
   }

??? ?? ??? ?? ?? ?? ??

??? ??? ????? ??? ????? ????? ?? ??? ??? ?? ??? ???? ??? ? ?? ??? ??? ? ????. ?? ???? ?? ??? ???? ???? ??? ? ????. ?????? ????? ???? ?? ??, ??? ???? ??? ??? ?????.

??? CSS? ??? ??? ???? ???? ?? ?? ???? ??? ??? ? ????. ?? ??? ????? ?? ?????. ??? ??? ???? ?? CSS ??? :has() ???? ???? ???? ??? ?? ?? ??? ??? ? ????.

? ?? ?? CSS? ????? ???? ???? ???? ??? ??? ??? ???? ?? ? ?? ??? CSS???? ??? ??? ???? ???? ??? ? ????.

?? ?? ? ??? ?? ???????. ?? ??? ??? ????.

• CSS? ???? ???? 'OFF' ??? ?? ??? ???? 'ON'? ??? ??? ???? ?? ???? ??????.

• ???? ?? ??? ??? ??: ???? ?? ???? "OFF" ??(?? ??)? ?????. ??? “ON”??(????)? ?????.

• ???? ?? ??? ??? ??: ??? ?? ??? ????? ??? ??? ?????. ???? ???? ??? "ON"(?? ??)? ?????. ??? “OFF”(??? ??)? ?????.

? ??? ???? ? ?? ?? ??? ?????.

? ??: ??? ?? ? ???? ??? ?? ???? ??

var( <custom-property-name>, <fallback-value>? )

? ??: ??? ?? ? ON/OFF ??? ?? ??? ??? ?? ?? ??

?? ??? ??? ??? CSS ??? ??? ??? ?? ?????.

.foo {
  margin: var(20px); /* Error, 20px is not a CSS variable */

  --prop-name: margin-top;
  var(--prop-name): 20px; /* Error, cannot use var() this way */
}

CSS ?? ???? ?? ?? ???

???? Space Toggle ??? ???? ?? ??? ????????. ??? ??? ?? ??? ?? ?????.

:root {
  /* 1. */
  margin: var(--b, 20px); /* Uses 20px if --b is invalid */

  /* 2. */
  padding: var(--c,) 20px; /* Falls back to 20px if --c is invalid */

  /* 3. */
  font-family: var(--fonts, "lucida grande", tahoma, Arial); /* Uses fallback font stack if --fonts is invalid */

  /* 4. */
  --text-size: 12;
  --text-unit: px;
  font-size: var(--text-size)var(--text-unit); /* Invalid, as it does not resolve to 12px */

  /* 5. */
  --initialized: initial;
  background: var(--initialized, initial); /* Results in background: initial */

  /* 6. */
  --invalid-url: "https://useme.medium.com";
  background: url(var(--invalid-url)); /* Invalid, as url() cannot parse var() */

  --valid-url: url(https://useme.medium.com);
  background: var(--valid-url); /* Correct usage */
}

??? ??? --Background-color: var(--light, #fbfbfb) var(--dark, #121212); ?? ????. ??? ???? --light ? --dark ?? ?? ???? ??? if/else? ????? ????????.

??? ?????? ???? --light: var(--ON); --ON: ??; --ON? ??? ??? ????. ?? --OFF? ? ???? ?????. var(--light, #fbfbfb) var(--dark, #121212)? ???? ???? ?? --light ??? ???? #fbfbfb? ???? ??? --dark ??(?? ??)? --Background-color? ?????. #fbfbfb? ????.

?? ?? ?? ??? ??? ??? ??? --light ? --dark? ??? ?? ?????. ??? ?? ? ?? ??? ? ?? ???? ???.

?? ??? ???????. ?? ??? ???? ?? --light: var(--OFF);? ??????. ? --dark: var(--ON);. ??? ????? ?? ??? ???. ?? ?????? ??? ? ??? ?? CSS?? ?? ??????. ? ?? ???? ??? ??? ? ??? ????.

?? ?: CodePen ?

---

??

CSS? 2016? ?? ?? ?????? CSS ??? ??? ? ?? ??? ?? ???? ????. @property ? :has()? ?? ??? ??? CSS ??? ???? ?? ???? ????. ?? ??? ??? ???? CSS ??? ?? ????? ????. ?? ?? ?? ??? ?? ?????? ???? ????? ???? ??? ?? ? ????. ????? ??? ??? ????? CSS? ??? ???? ?? ???? CSS ??? ?? ??? ??? ?? ?? ??? ??? ?? ? ???? ?? ?????.

---

????

• https://stackoverflow.com/questions/42330075/is-there-a-way-to-interpolate-css-variables-with-url/42331003#42331003
• https://kizu.dev/cycl-toggles/#was-this-always-possible
• https://dev.to/afif/what-no-one-told-you-about-css-variables-553o
• https://hackernoon.com/cool-css-variable-tricks-to-try-uyu35e9
• https://lea.verou.me/blog/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/

? ??? CSS ??? ??? ?? ?? - var() ? ?? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!