Sep 19, 2019

@content: SASS equivalent of React children

Do you know that you can use @content in SASS mixin? It works like React Children.

@mixin focusedByMouse {
  &:focus:not(:focus-visible) {
    @content;
  }
}

.button {
  @include focusedByMouse {
    filter: none;
    border-color: transparent;
  }
}

Would transpile to:

.button:focus:not(:focus-visible) {
  filter: none;
  border-color: transparent;
}

Huh, you already know that?

Well, I just know it today, and this is my blog. Meh.

Thanks for reading!

Love what you're reading? Sign up for my newsletter and stay up-to-date with my latest contents and projects.

    I won't send you spam or use it for other purposes.

    Unsubscribe at any time.