Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How extend placeholder selector in Sass using @use rule

Tags:

sass

node-sass

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?

like image 434
blackhard Avatar asked Jun 04 '20 20:06

blackhard


1 Answers

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.

like image 146
blackhard Avatar answered Sep 25 '22 17:09

blackhard