Refusal of new syntax for css media queries @media range (width > value)

support
1

Hi,
It is strange that the following CSS syntax for media queries is refused:

@media (width >= 600px) {
     ...
  }
}

According to Kevin Powell it’s accepted by almost browsers. Is it hugo or goldmark or something else ?
For info, trying the code above gives: Error: Error building site: TOCSS: failed to transform "defaults.scss" (text/x-scss): "/home/drm/WEBSITE/themes/hugo-book/assets/_structure.scss:67:9": unclosed parenthesis in media query expression

2

You are transpiling to CSS using the LibSass transpiler, which was deprecated a few years ago.

The syntax you are trying to use (Media Queries Level 4) is new and not supported by LibSass.

You should be using the Dart Sass transpiler.

See https://discourse.gohugo.io/t/using-the-dart-sass-transpiler/41878

5 Likes
3

Oh nice, something new :slight_smile:
It’s done. thanks

4

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.