CSS variables and @media queries

[iatek]

According to the docs... https://getbootstrap.com/docs/4.0/getting-started/theming/#examples

"You can also use our breakpoint variables in your media queries"

Example:

.content-secondary {
  display: none;
}

@media (min-width(var(--breakpoint-sm))) {
  .content-secondary {
    display: block;
  }
}

But, from what I can see this doesn't work. I've also found evidence that var() doesn't work with media queries at all: https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries

[mdo]

Ah, yeah, we need to update that—they definitely don't.

[ui-coder]

Sad but true. I tried that, too. It would be just great if they did work. What does the W3C think of that?

[LearnGrowAndShare]

Hi,
I achieved the same thing using map-get function in scss. I did something like below, it is working and it takes the value from the grid definition:

.content-secondary {
  display: none;
}

@media (min-width: map-get($grid-breakpoints, "sm")) {
  .content-secondary {
    display: block;
  }}