使用@supports selector()，尽管 Sass 不支持它

Question

我想通过选择器使用新的CSS功能查询，如下所示：

:root { --focus-shadow: 0 0 0 2.4px rgba(130, 138, 145, 0.5); }
/* Focus styles even for mouse selection in old browsers */
*:focus { outline: none; box-shadow: var(--focus-shadow); }
/* Newer browsers: Only add focus styles if e.g. navigating with the keyboard */
@supports selector(*:focus-visible) {
*:focus { box-shadow: none; }
*:focus-visible { box-shadow: var(--focus-shadow); }

<a href="#">Focus me</a>

以上是有效的 CSS(尽管截至 2020 年 6 月支持不佳(，但 Sass 在其两个实现中的任何一个中都不支持它。它正在开发中，但看起来需要一段时间才能实现它。尝试通过 Sass 编译上述内容会抛出错误(在 Sass 实现之间有所不同;有关错误的详细信息，请参阅这些问题(。

同时，我想诱使 Sass 按原样编译我的支持查询，而不试图理解它。我尝试了一些事情，但没有成功。使用unquote()，这是最有希望的尝试：

@mixin supports-selector( $selector ) {
$query-str: #{ unquote( '@supports selector(' ) }#{ unquote( $selector ) }#{ ')' };
#{ unquote( $query-str ) }#{ unquote( '{' ) }
@content;
#{ unquote( '}' ) }
}
:root { --focus-shadow: 0 0 0 2.4px rgba(130, 138, 145, 0.5); }
*:focus { outline: none; box-shadow: var(--focus-shadow); }
@include supports-selector( '*:focus-visible' ) {
*:focus { box-shadow: none; }
*:focus-visible { box-shadow: var(--focus-shadow); }
}

不过，这仍然会引发错误，因为 Sass 期望任意字符串是一个属性，后跟一个冒号：

属性 "#{ unquote( $query-str ( }#{ unquote( '{' ( }" 后跟 '：">

不取消引用@supports部分会导致错误，即selector(whatever)不是有效的@supports条件。

我不知道还能尝试什么。

我怎样才能欺骗萨斯不编译我的混音？

Answer 1

这可能对你有用 - 通过转义字符，它仍然会编译为 CSS。

SASS/SCSS处理器挂断的不是@supports，而是*:focus-visible：

:root { --focus-shadow: 0 0 0 2.4px rgba(130, 138, 145, 0.5); }
/* Focus styles even for mouse selection in old browsers */
*:focus { outline: none; box-shadow: var(--focus-shadow); }
/* Newer browsers: Only add focus styles if e.g. navigating with the keyboard */
@supports #{'(*:focus-visible)'} {
*:focus { box-shadow: none; }
*:focus-visible { box-shadow: var(--focus-shadow); }
}

编译成这样：

:root {
--focus-shadow: 0 0 0 2.4px rgba(130, 138, 145, 0.5);
}
/* Focus styles even for mouse selection in old browsers */
*:focus {
outline: none;
box-shadow: var(--focus-shadow);
}
/* Newer browsers: Only add focus styles if e.g. navigating with the keyboard */
@supports (*:focus-visible) {
*:focus {
box-shadow: none;
}
*:focus-visible {
box-shadow: var(--focus-shadow);
}
}

萨斯迈斯特链接玩。

编辑：根据您的评论，您仍然可以添加selector：

@supports  #{'selector(*:focus-visible)'}  {
*:focus { box-shadow: none; }
*:focus-visible { box-shadow: var(--focus-shadow); }
}

更新的萨斯梅斯特