Import only one CSS class from another Sass file

Question

Consider this code:

// File A1.scss
.abc {
  // styles for abc
}

.def {
  // styles for def
}


// File B2.scss
.xyz {
  // styles for xyz
}

Is it possible to import and use .abc from A1.scss into B2.scss without having the class .def in B2.css (i.e. the output of B2.scss)? A1.scss is large in real project, so can't afford to have B2.scss be bloated with other styles. I am using this in a React app with Webpack.

Maybe it helps ? https://stackoverflow.com/questions/11787330/is-it-possible-in-sass-to-inherit-from-a-class-in-another-file — Deniz Bayar, Aug 02 '19 at 09:44
@DenizBayar: I already saw that post. In fact I have added this question in comments on that post :). — darKnight, Aug 02 '19 at 09:49
You can move the common styles ( %abc { // styles}) into a separate partial and import that in necessary files. and use .class { @extend %abc ; } — Vivekraj K R, Aug 02 '19 at 11:51

score 0 · Answer 1 · answered Jul 03 '23 at 13:08

Try using one of the relatively new sass rules - @use or @forward. Both rules only load the given .sass / .scss file once, even if used multiply in your project. Those two are part of SASS Modules. Both @use and @forward partially resolves one of the oldest css problems - namespaces and private variables.

// get ui/forms.scss file
@use 'ui/forms' as forms;

.footer-button{
  // use this specific mixin from ui/forms.scss
  @include forms.form-button;
}

More examples:

https://css-tricks.com/introducing-sass-modules/

https://sass-lang.com/documentation/at-rules/use/

https://sass-lang.com/documentation/at-rules/forward/

Import only one CSS class from another Sass file

1 Answers1