Variables and media queries

Giganews Newsgroups
Subject: Variables and media queries
Posted by:  Andrew Poulos (ap_pr…
Date: Fri, 26 Oct 2018

I have this

:root {
  --opacity: 0.6;
  --colour: rgba(255, 255, 255, var(--opacity));
..btn {
  background-color: var(--colour);

and then I have a media query

  .btn:hover {
    /* set opacity here */

How do I change the value for --opacity within the media query just for

If I add :root to the media query it affects all instances of --colour
on the page (which I don't want).

Andrew Poulos