Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.4)
// ----

.c-nav {
  position: relative;

  &:before {
    content: 'Menu';
    display: inline-block;
    padding: 1rem;
    
    // Instead of this: 
    .c-nav:focus &,
    .c-nav:hover & {
      background-color: grey;
    }
    
    // Can I do something like this 
    // and get the same output as above
    @at-root {
      &:focus &, 
      &:hover & {
        background-color: grey;
      }
    }
    
  }
  
  // Or is it best to just do it like this
  &:focus &:before, 
  &:hover &:before {
    background-color: grey;
  }
}

SassMeister-output.css

.c-nav {
  position: relative;
}

.c-nav:before {
  content: 'Menu';
  display: inline-block;
  padding: 1rem;
}

.c-nav:focus .c-nav:before,
.c-nav:hover .c-nav:before {
  background-color: grey;
}

.c-nav:before:focus .c-nav:before,
.c-nav:before:hover .c-nav:before {
  background-color: grey;
}

.c-nav:focus .c-nav:before,
.c-nav:hover .c-nav:before {
  background-color: grey;
}