CODEWITHSUNDEEP
sassnode-sass
blackhard
blackhard

Reputation: 542

How extend placeholder selector in Sass using @use rule

I have _extandable.scss file with one placeholder selector:

%text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

and I'm trying to use it in another file:

@use 'extendable';

.text-ellipsis {
  @extend extendable.%text-ellipsis;
}

The output of sass-loader is an error:

SassError: Expected identifier.
   ╷
4  │   @extend extendable.%text-ellipsis;
   │                      ^
   ╵
  src/assets/styles/_component.scss 4:22  @import

What's the right way of importing of placeholder selectors using @use rule?

Upvotes: 9

Views: 2482

Answers (2)

Tyler V.
Tyler V.

Reputation: 2561

To clarify the selected answer, you still need @use but you exclude the namespace when using the placeholder. Like this:

@use 'extendable';

.text-ellipsis {
  @extend %text-ellipsis; /* No namespace */
}

Upvotes: 0

blackhard
blackhard

Reputation: 542

After some investigation I've found out that it's incorrect syntax. Placeholder selectors have global scope during compiling, so we cannot write like this and we don't need to do it.

Upvotes: 6

Related Questions