Sass - Prefix all classes imported from file (with sass import or webpack loader)

Question

This question might be pretty stupid and duplicit, but I can't find a working solution to my problem. I'm sorry if this has already been answered somewhere else.

What I'm trying to do is to use 2 css frameworks in one project.

I have to use semantic as my main css framework - this has to be globally accessible. For example element with class "ui grid" should use semanticUI's "ui grid" behaviour.

But then, I want to use Bulma, as my secondary framework. To avoid conflicts, I want to prefix all Bulma classes with a static prefix. So for example Bulma's "modal" class will be accessible as "bulma-modal". something like this:

  .&bulma {
    @import '~bulma/bulma';
  }

This would (hopefully) avoid all class conflicts and still let me use both semantic and Bulma in the same scope.

Thanks for any help or suggestion.

Gametocyte

Answer 1

This framework may be of interest to you https://github.com/Glidias/v-namespace

In combination with using sass:meta to import the stylesheet from node modules in a way which allows it to be nested in the selector hierarchy.

@use "sass:meta";
.bulma {
    @include meta.load-css("../node_modules/bulma/sass/helpers/flexbox.sass");
}

Fonteyn

Isn't this the same thing as doing: .bulma { @import '../node_modules/bulma/sass/helpers/flexbox.sass'; } ? – Delouse

Answer 2

.prefix- {
    &btn {

    }
    &nav {

    }
}

.prefix-btn {}
.prefix-nav {}

Weight

See "Explaining entirely code-based answers". While this might be technically correct it doesn't explain why it solves the problem or should be the selected answer. We should educate in addition to help solve the problem. – Thanasi

Answer 3

try like this in your bulma scss files

$my-name: mycss--;

.#{$my-name}btn {
  ...
}

.#{$my-name}input {
  ...
}

.#{$my-name}header {
  ...
}

Setaceous

Thanks for the answer. But I obviously can't prefix all classes used in a css framework like this. Would be a lot of work. – Butyrate