Is there a way to use embedding style syntax for simplifying ( adding namespace to ) multiple class-CodePudding

I have icon classes that contain the background-image and background-size properties. I want to protect the names of these classes with the prefix .icon. Then I can start writing out .icon.profile, .icon.search etc. selectors. If it were .icon .profile, .icon .search etc., then I could use embedding is SCSS to neatly protect namespace. However embedding won't work for multiple class selectors, because it selects child nodes. Once I use SCSS, it feels unintelligent to write out the prefix every time. To use embedding in DOM to support embedding in SCSS is an overkill and expensive ( adds unnecessary complexity of DOM elements ).

Is there a way to add "namespace" to classes that compile to multiple class selectors.

//////////////////////////////////////////////////////////////
// icons
.icon.search {
  background-image: url(...);
  background-size: cover;
}

.icon.profile {
  background-image: url(...);
  background-size: cover;
}
//////////////////////////////////////////////////////////////

CodePudding user response：

If I understand your problem correctly, what you are looking for is the parent selector &:

.icon {
  &.search {
    background-image: url(...);
    background-size: cover;
  }

  &.profile {
    background-image: url(...);
    background-size: cover;
  }
}