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

Question

我想通过选择器使用新的CSS feature queries，如下所示：

: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（尽管 poorly supported 截至 2020 年 6 月），但 Sass 在其两个实现中都不支持它。 It's in the works，但看起来需要一段时间来实现它。尝试通过 Sass 编译上述代码会引发错误（在 Sass 实现之间有所不同；有关错误的详细信息，请参阅 these issues）。

同时，我想诱使 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); }
}

这个 still 会抛出一个错误，因为 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 Link 一起玩。

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

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

Updated SASSMeister