0

If I use hex color it work's perfectly. Don't know why custom property doesn't working.

I tried everything, but no luck :( {I am using chrome}

:root {
  --primary-color: hsl(0, 0% 20%);
}

.btn {
  display: inline-block;
  padding: 0.7rem 1.2rem;
  /* border: none; */
  background-color: var(--primary-color);
  /* color: #fff; */
}
<button class="btn">Read More</button>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Mahabubur Rahman
  • 159
  • 1
  • 9
  • You example *works* for me, as-is **check your HSL color...** – vsync Apr 22 '20 at 08:31
  • The term is not *"custom CSS property"* **but** *"CSS variable"* – vsync Apr 22 '20 at 08:33
  • @vsync *custom property* is also correct: https://www.w3.org/TR/css-variables-1/ – Temani Afif Apr 22 '20 at 08:34
  • @TemaniAfif - There's nothing custom about "background-color", if anything, it should be "custom value", not "property". You cannot make you own properties in CSS – vsync Apr 22 '20 at 08:36
  • @vsync checked my HSL it's looking correct. – Mahabubur Rahman Apr 22 '20 at 08:37
  • @vsync *--primary-color* is a custom property not a value (its value is the hsl color) – Temani Afif Apr 22 '20 at 08:37
  • I disagree regarding the terminology, and regardless of what W3C spec says. I wasn't present in those meetings and if were, would reject, being proficient in CSS since the 90's. – vsync Apr 22 '20 at 08:41
  • 2
    @vsync https://stackoverflow.com/a/48888039/8620333 – Temani Afif Apr 22 '20 at 08:47
  • 1
    What a funy off-topic flamewar! @vsync, those thingies in CSS rules between `{…}` are called *properties*, not "variables", right? They can be declared only inside rules and are bound only to elements matching selector and depending their declared inheritability cascades down in DOM tree (what is nice distinction from e.g. SASS *variables*). Then why would you call `color` in `*{color:red}` *property* name and `--color` in `*{--color:red}` *variable* name? Maybe the only obligation to w3 could be decision to call their getter `var()`, but most probably there were no better alternatives. – myf Apr 22 '20 at 09:36

1 Answers1

0

You need to add a comma , after the second parameter of HSL.

Since you havn't provided an image of the desired color, i'm guessing this was the mistake and you are after a grey color.

:root {
  --primary-color: hsl(0, 0%, 20%)
}

body {
  background: var(--primary-color)
}
vsync
  • 118,978
  • 58
  • 307
  • 400