Support <general-enclosed> in @supports

[nex3]

See sass/sass#2780

[Ariane-B]

Hi! Since it looks like it'll be a while until this is supported, do you have ideas for a workaround in the mean time? Something that would allow me to do something like this:

  @mixin focus-hl {
    @supports selector(*:focus-visible) { outline: 1px solid red; }
  }

  div { @include focus-hl; }

[hyfydistro]

Hi! Since it looks like it'll be a while until this is supported, do you have ideas for a workaround in the mean time? Something that would allow me to do something like this:

  @mixin focus-hl {
    @supports selector(*:focus-visible) { outline: 1px solid red; }
  }

  div { @include focus-hl; }

Depends on the specifics.
e.g. color

            background-color:#000
            background-color: rgba(0, 0, 0, 0.6)

Most animations will have to be done by JavaScript and detected with. Otherwise use Modernizr and have a different class set upon it. I can't say this will solve most of the problems. It will limit how you can build your site.

Alternatively, build in a Progressive enhancement manner.

P.S. I'm still hoping they'd add some solution to it too.

[janwidmer]

is this supposed to work now?

@supports (:focus-visible) {
    &:focus {
      outline: none;
    }
  }

I am still getting an error SassError: Expected identifier: