Can I extend external scss rule without including it in the output?

GIVEN that there is existing scss file that defines rules like .btn {..} or .btn-primary...

I WANT to declare my own rules by extending existing rules

.my-button {
  @extend .btn
  @extend .btn-primary
}

without actually including the .btn and .btn-primary classes in my generated css file?

Normally I need to @import exiting.scss, but that includes all the rules from the file in my css output.

Sass does not currently support this by default, neither with the @import nor @use rule.

Nonetheless, if you (can) use npm packages (npm / yarn) in your project, then node-sass-magic-importer may come in handy for you.

In your example, you could do the following:

@import '{ .btn, .btn-primary } from ~bootstrap';

.my-button {
  @extend .btn
  @extend .btn-primary
}

Note that the above will not do exactly what you desire – it will still import the other two classes though at least not the entire stylesheet. If you'd still like to go one step further, you could do:

@import '{ .btn as .my-button } from /bootstrap/_buttons.scss';
@import '[variables] from /bootstrap/_variables.scss';
@import '[mixins] from /bootstrap/mixins/_buttons.scss';

.my-button {
  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}

Sass: @extend, Extension Scope; Mandatory and Optional Extends; Extends or Mixins? Any selectors that include placeholders aren't included in the CSS output, but other CSS at-rules, it's not allowed to extend selectors that appear outside its at-rule. While @extend is allowed within @media and other CSS at-rules, it’s not allowed to extend selectors that appear outside its at-rule. This is because the extending selector only applies within the given media context, and there’s no way to make sure that restriction is preserved in the generated selector without duplicating the entire style rule.

when you import as @import in scss and when you do a production build the webpack dependancy graph will only include it once at the top level as it becomes a common chunk since you are using it in multiple places. Yes there is a side effect that unused scss is also included as there isn't much of tree shaking that is done.

Hence it should not affect the production build.

Sass: @import, Sass extends CSS's @import rule with the ability to import Sass and CSS time it's @import ed, which increases compilation time and produces bloated output. Load paths will only be used if no relative file exists that matches the import. An external style sheet can be written in any text editor, and must be saved with a .css extension. The external .css file should not contain any HTML tags. Here is how the "mystyle.css" file looks like:

I will recommend you to use @mixins and @include for this.

Although because as you said in your question, you are using an existing file (probably third party) that defines this rules. It may be tedious to turn the classes from this file into mixins.

so if you are going to use only a few classes from this file I recommend you to do that.

You will have to turn:

.btn{
/*
some cool styles
*/
}

into:

@mixin{
/*
cooler styles
*/
}

but still mixins as declared in the Sass documentation do exactly what you want.

source code SCSS:

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;
}

result CSS:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
  margin-left: -2px;
  margin-right: 2em;
}

Extending In Sass Without Creating A Mess — Smashing Magazine, Whereas a @mixin outputs rules that can be copied for multiple Sass includes a special type of selector called the placeholder selector that is NOT work and will throw this error: // You may not @extend an outer selector� The big advantage here is you can use internal naming schemes that don’t effect your external naming schemes. Grid classes are a good example of this. Names like “grid-1-2” and “grid-1-3” are great names internally, but not great actual HTML class names. With placeholders you can keep them internal.

The Extend Concept, You can often achieve the same result with a mixin. Extend can't do that, so a rule of thumb is: any time you'd use a mixin with no allow you to extend from inside a media query to a selector defined outside a media query. It can only contain universal statements, as well as the @return at-rule which indicates the value to use as the result of the function call. Functions are called using the normal CSS function syntax.

No seriously: Don't use @extend, Allow me to illustrate why — in most cases — using @extend in Sass is a bad idea. You might expect your SCSS output to look like this. With @mixin we can group a set of repeated CSS rules, and @include the mixin� You can extend most simple CSS selectors in addition to placeholder classes in Sass, but using placeholders is the easiest way to make sure you aren't extending a class that's nested elsewhere in your styles, which can result in unintended selectors in your CSS.

What Nobody Told You About Sass's @extend, Of course you're not limited to extending classes; you can extend tag selectors same rule but did you know you can do so with a single @extend directive? The Sass @extend directive is so powerful it can result in unusually large extends. You may not @extend an outer selector from within @media. Sass variables are simple: you assign a value to a name that begins with $, and then you can refer to that name instead of the value itself.But despite their simplicity, they're one of the most useful tools Sass brings to the table.

Comments
  • Not trying to be smug, but isn't it just as simple as not doing what you normally do and simply don't @import and create your own rule-set in the final document? Seems to me you can't extend existing rules and not wanting to include the existing declarations. Mutual exclusive logic.
  • Unfortunately, I think the only way to accomplish this would be to convert .btn to an extension (%btn { .... }) and extend that. Outside of that, maybe @use, but I haven't personally used that functionality yet, so I'm unsure if that is a viable option.
  • I would need some more information to better understand what you're looking for specifically. I assume you will be loading two CSS files... a Bootstrap CSS file and another CSS file which would include your .my-button rule. Is that correct? And you are trying to not have redundant code in the Bootrap and your own custom CSS files, correct?
  • @inki: no, I actually want just my custom css file. I.e. I won't use .btn-primary class anywhere
  • I agree with @Chaosxmk. Why not simply use mixins instead? See github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/… as an example.