0

I'm importing sass classes from another project and want to provide a wrapper to keep these styles localised.

My wrapper looks like this

.my-wrapper {
   @include "framework-main"
}

I first looked fine but then I noticed that some tiles are missing. The problem is that the framework sass files use heavily reference to parent: &. This works fine for them but when I apply the wrapper it's get injected everywhere.

How can I make the wrapper a prefix only?

To illustrate:

SASS:

.wrapper {

  // reset here somehow, I have no control over the nested code.
  .parent {
    &--child1 &--child2 {
      width: 10%;
    }
  }
}

What I want:

.wrapper .parent--child1 .parent--child2 {
  width: 10%; 
}

What I get:

.wrapper .parent--child1 .wrapper .parent--child2 {
  width: 10%; 
}

Is this even possible?

Miroslav Ligas
  • 1,287
  • 8
  • 22

1 Answers1

2

Yes, it is possible, there is just small mistake in your code - you don't need . in front of &--child so it will not break selector construction:

.wrapper {

  // reset here somehow
  .parent {
    &--child {
      &--grand-child{
      width: 10%;
      }
    }
  }
}

gives

.wrapper .parent--child--grand-child {
  width: 10%;
}
Flying
  • 4,422
  • 2
  • 17
  • 25
  • Hi @Flying . Thanks for the reply. I made an error in the sample code. I provided more info now Could you adjust your answer? – Miroslav Ligas Nov 09 '17 at 15:03
  • @MiroslavLigas Your sass code structure doesn't match your desired output structure. Or maybe you've made a mistake and your desired output is `.wrapper .parent--child1, .wrapper .parent--child2` (notice the comma)? Please also tell which part of the code you don't control (`.wrapper` or `.parent` and below)? – Flying Nov 09 '17 at 15:10
  • What he is looking for is an immediate parent seletor to get rid of the second `.wrapper`. – Marvin Nov 09 '17 at 15:15
  • No, the comma should not be there. I don't have any control over anything that is below the parent or can't modify the parent itself – Miroslav Ligas Nov 09 '17 at 15:17
  • the original code compiles to ```.parent--x .parent--y {...}``` But when I apply the wrapper then the wrapper class gets into the middle of the selector not only at the beginning and things stop to work. – Miroslav Ligas Nov 09 '17 at 15:19
  • I doubt that it is possible. Looking into sass docs, experimenting and looking for answers proves that there is probably no way to achieve such behavior. [Here](https://stackoverflow.com/a/11689615/2633956) is similar question with same answer. The only thing that came in mind is some kind of post-processing through [PostCSS](http://postcss.org/) or something similar. But maybe it will be easier to switch to different framework. – Flying Nov 09 '17 at 15:26