Validated `or` css-operator usage does not compile in media query when included in SCSS

[vadimkantorov]

Validated `or` css-operator usage does not compile in media query when included in SCSS

[connorskees]

From what I can tell, support for the keyword "or" is a CSS media query level 4 feature. libsass wouldn't have support for media queries level 4, as Sass (the language) added support several years after libsass was EOL'd. As a workaround you should be able to use commas (e.g. @media (prefers-color-scheme: light), (min-width: 0px) {}).

Also see sass/sass#2538

[vadimkantorov]

Oh, I never realized that libsass was deprecated :(

Are there any plans of Python bindings for the Sass-Dart?

I found it very nice to use SASS without any npm/webdev setup using https://sass.github.io/libsass-python/

As a workaround

Yeah, that's how I worked it around, yes. I managed to make a fully symmetrical auto/light/dark switches using some hacky media queries:

@charset "utf-8";

$colorscheme: "auto" !default;

$falsemediaquery: 1000000px;
$truemediaquery: 0px;

$forcelight: $falsemediaquery;
$forcedark: $falsemediaquery;

@if $colorscheme == "light" {
    $forcelight: $truemediaquery;
    $forcedark: $falsemediaquery;
}
@if $colorscheme == "dark" {
    $forcelight: $falsemediaquery;
    $forcedark: $truemediaquery;
}

@media (prefers-color-scheme: light) and (max-width: $forcedark), (min-width: $forcelight)  {
    :root { /* light mode blah */ }
}

@media (prefers-color-scheme: dark) and (max-width: $forcelight), (min-width: $forcedark) {
    :root { /* dark mode blah */ }
}

[vadimkantorov]

I found https://pypi.org/project/dart-sass/, but not sure if it's officially supported

[connorskees]

That project is not officially supported and hasn't been updated in 2 years. It looks like all it does it call into the precompiled dart-sass binary. You could probably write something similar pretty quickly, depending on your use case.

[vadimkantorov]

Thank you! I created a separate issue in https://github.com/sass/dart-sass !