使用@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 条件。

我不知道还能尝试什么。

我怎样才能欺骗 Sass 不编译我的 mixin？

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);
  }
}

SASSMEISTER 链接来玩。

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

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

更新了SASSMeister