Custom Properties & Functions

var(--my-font, Baskerville, Georgia, serif)

var(--my-color, var(--other-color, pink))

$my-color: rebeccapurple;
--my-color: rebeccapurple;

html {
  --gutter: 1.5rem;
  --shim: calc(var(--gutter) / 2);
}

html {
  --brand-color: hsl(330, 100%, 45%);
  --action: var(--brand-color);
}

.example { 
  $columns: 2; 
}
.nested-class { 
  /* $columns == undefined */ 
}

.example { 
  --columns: 2; 
}
.nested-class { 
  /* var(--columns) == 2 */ 
}

@media (min-width: 30em) {
  html {
    $columns: 6; /* scope only */
    --columns: 6; /* 30em+ in browsers! */
  }
}

$gutter: 1rem;
html { --gutter: #{$gutter}; }

$brand-colors: (
  'brand-blue': hsl(195, 52%, 31%),
  'brand-orange': hsl(24, 100%, 62%),
  'brand-pink': hsl(330, 100%, 45%),
);

html {
  @for $name, $value in $brand-colors {
    --#{$name}: #{$value};
  }
}

:root {
  --brand-color: hsl(330, 100%, 45%);
  --action: var(--brand-color);
}

[data-button='go'] {
  --btn-color: green;
}

* {
  --grid-area: main;
}

[data-grid] * {
  --grid-area: main;
}

[data-grid] * {
  grid-area: var(--grid-area, main);
}

button {
  background: blue
}

[data-theme='rebecca'] button {
  background: rebeccapurple;
}

button {
  background: var(--btn-color, blue);
}

[data-theme='rebecca'] {
  --btn-color: red;
}

.component {
  color: var(--color, black);
}

.context {
  --color: rebeccapurple;
}

[data-button] {
  background: var(--btn-color, blue);
}

[data-button]:disabled {
  --btn-color: gray;
}

[data-button='go'] {
  --btn-color: green;
}

<button style="--color: blue;">

button {
  background: var(--color, red);
}

button.green {
  background: green;
}

.box {
  box-shadow: var(--shadow-x, 0)
              var(--shadow-y, 1px)
              var(--shadow-blur, 0)
              var(--shadow-color, currentColor);
}

.usage { --shadow-y: -1px; }

[data-theme] {
  background: var(--background);
  color: var(--text);
}

[data-theme='light'] {
  --background: #ddf;
  --text: #226;
}

html {
  --brand-light: #ddf;
  --brand-dark: #226;
}

[data-theme='light'] {
  --background: var(--brand-light);
  --text: var(--brand-dark);
}

html {
  --h: 330;
  --s: 100%;
  --l: 34%;
  --color: hsl(var(--h), var(--s), var(--l));
}

* {
  --complement: calc(var(--h) - 180);
  background: hsl(var(--complement), var(--s), var(--l));
}

* {
  --threshold: 55;
  --contrast: calc((var(--l) - var(--threshold)) * -100%);
  color: hsl(var(--h), var(--s), var(--contrast));
}

html {
  @media (prefers-color-scheme: dark) {
    --os-mode: -1;
  }

  @media (prefers-color-scheme: light) {
    --os-mode: 1;
  }
}

[data-colors='light'] {
  --html-mode: 1;
}

[data-colors='dark'] {
  --html-mode: -1;
}

[data-colors] {
  --mode: var(
    --user-mode, var(
      --html-mode, var(
        --os-mode, 1
      )
    )
  );
}

<main style="
  --day-start: 9,
  --day-end: 18
">

<section style="
  --event-start: 13,
  --event-end: 14
">

<div style="--index: {{ loop.index }};">

[style*='--index'] {
  animation-delay: calc(var(--index) * 50ms);
}

<div style="--ease: var(--in-out-back);">

[style*='--ease'] {
  --in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

<section
  class="sprite-demo"
  :style="{
    '--src': show.sprite.src,
    '--columns': show.sprite.columns,
    '--rows': show.sprite.rows,
}">...</section>

<div
  v-for="action in show.actions"
  :key="action.name"
  :data-action="action.name"
  :style="{
    '--row': action.row,
  }"
/>

button {
  --color: green;
  background: var(--color);
  transition: background 0.5s;

  &:hover {
    --color: red;
  }
}

@property --brand-color {
  syntax: "<color>";
  initialValue: "pink";
  inherits: true;
}

CSS.registerProperty({
  name: "--brand-color",
  syntax: "<color>",
  initialValue: "pink",
  inherits: true,
});

div::after {
  --string: 'hello world';
  content: var(--string);
}