I would like to know how the following css works?

               --accent: var(--hue) var(--sat) 50%;

CodePudding user response：

Your code displays what is known as a CSS property. This particular property sets the color of an elements accent. The var(--hue) var(--sat) 50%; indicates the colors saturation and hue percentage.

CodePudding user response：

The CSS variable (a CSS property) --accent has not been given two values. It has been given one value which is in essence an entire string.

Consider this snippet (click on the chekbox to more clearly see the accent color at work):

.container {
  --accent: 250, 100%, 50%;
}

.container input {
  accent-color: hsl(var(--accent));
}

<div class="container">
  <input type="checkbox">
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

That has set the variable --accent to the entire 'string' and then used it when setting another property, accent-color.

Now we can go one step further and define some other variables which will be used to make up the variable --accent.

Taking your example: --accent: var(--hue) var(--sat) 50%; this snippet gives --hue and --sat their values for the scope of the whole page and then uses them to set the accent-color of the input within container.

:root {
  --hue: 250;
  --sat: 100%;
}

.container {
  --accent: var(--hue) var(--sat) 50%;
}

.container input {
  accent-color: hsl(var(--accent));
}

<div class="container">
  <input type="checkbox">
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>