Encapsulated/Namespaced CSS and Sass Extend without Nested Selectors

Question

Considering that Sass ' extend feature does not allow for nested selectors. What is a robust way to write modular and namespaced Sass while still making use of Sass ' extend feature.

Eg I do not wish to pollute my "global" name space with descriptor like class just so I can use Sass ' extend feature.

.button { ... }
.my-widget .large-button { @extend .button; }

Additionally, the following does not work by design:

.my-widget .large-button { ... }
.your-widget .your-button {
  @extend .my-widget .large-button;
}

Answer 1

Sass ' extend feature will not extend nested selectors but it does work within a scope.

Eg

.my-widget {
  .button { ... }
  .large-button { @extend .button; }
}

Now the descriptor class .button is not found in the "global" space and is name spaced to .my-widget .