When transferring Sass classes from another project, I wanted to create a wrapper to contain these styles locally.
Here is how my wrapper is currently set up:
.my-wrapper {
@include "framework-main"
}
Initially, everything seemed fine. However, I soon realized that some elements were missing. The issue stems from the framework's use of parent references (&). While this works within their files, it causes conflicts when applied within my wrapper.
How can I limit the wrapper as just a prefix?
For example:
SASS:
.wrapper {
// Some reset needed here, despite no control over nested code.
.parent {
&--child1 &--child2 {
width: 10%;
}
}
}
The desired outcome:
.wrapper .parent--child1 .parent--child2 {
width: 10%;
}
However, what I am getting is:
.wrapper .parent--child1 .wrapper .parent--child2 {
width: 10%;
}
Is there a way to achieve the desired result?