CODEWITHSUNDEEP
cssvue.jssass
Kasheftin
Kasheftin

Reputation: 9433

Add prefix for each rule in SASS

My project uses vuetify and a lot of my own styles. My styles frequently use & multiple times in the style declaration, like so:

.sis-sidebar {
  &__link {
    &.-active &-placeholder {
      color: #fff;
    }
  }
}

// Compiles to:

.sis-sidebar__link.-active .sis-sidebar__link-placeholder {
  color: #fff;
}

It works just fine for the html like that:

<div class="sis-sidebar__link -active">
  <div class="sis-sidebar__link-placeholder">
    This one is white
  </div>
</div>

I want all my styles to have more priority than the styles from the framework. But I don't want to change anything inside. That's the entry scss file that I'm trying to modify:

@import 'framework';
@import 'my-styles';

I want all my styles to be prepended with some #sis prefix, but only once. If I do

@import 'framework';
#sis {
  @import 'my-styles';
}

// It compiles to:

#sis .is-sidebar__link.-active #sis .is-sidebar__link-placeholder {
  color: #fff;
}

// And I want it to be: 

#sis .is-sidebar__link.-active .is-sidebar__link-placeholder {
  color: #fff;
}

Is it possible to do that?

Upvotes: 1

Views: 2078

Answers (1)

Artur Noetzel
Artur Noetzel

Reputation: 453

You can do it this way:

.sis-sidebar {
  &__link {
    #sis &.-active &-placeholder {
      color: #fff;
    }
  }
}

You could also avoid this issue altogether by using variables, like this:

$sidebar-block: '.sis-sidebar';
$sidebar-element: '__link';

#sis {
  #{$sidebar-block + $sidebar-element}.-active #{$sidebar-block + $sidebar-element}-placeholder {
    color: #fff;
  }
}

Upvotes: 1

Related Questions