Css code

[altabz]

what is wrong with my code?

:root {
  --base-color: 240, 25%, 50%;
 
}
.photo-hero {
  background-color: hsl(var(--base-color));
  min-height: 700px;
}
.photo-hero h1 span {
  color:hsl(var(--base-color), 100%, 60%);
}

The photo-hero class works. But my adjustments in the photo-hero h1 span doesn’t work. but I tried to use rgb and hex and it works.

[taylorsabbag]

This path may lead to a practice encouraging too many colours over time. According to this stack overflow post, it is technically doable. But you’d be better off establishing a few different colours as a colour scheme because it’d be easier to see when reading the code what everything is meant to be.

[kirativewd]

To add on, if you were to look at the CSS once applied it would be:

.photo-hero {
  background-color: hsl(240, 25%, 50%);
  min-height: 700px;
}
.photo-hero h1 span {
  color: hsl(240, 25%, 50%, 100%, 60%);
}

As you can see, .photo-hero works because it is a valid value for hsl. However, when applying var(--base-color) to the first value of hsl in .photo-hero h1 span, it creates too many values, invalidating the CSS.

[altabz]

I apply hsl directly to the ruleset instead of the root and it work thanks.