How to extend a class from a CSS file in Sass?

Question

I have a style library with the general styling for my project. This library is packed into one library.css file. In this library, I have a class a.

In one of my scss stylesheets I'd like to extend this calss a from library.css:

@import 'library.css';

.b {
 @extend .a
}

When I do this, I'm told that class a was not found in library.css.

Is there any way to extend a class from a CSS stylesheet?

Answer 1

When you add an @import at-rule to your Sass code, you need to be careful what you wish to achieve. @import is actually valid CSS, so Sass needs to evaluate and figure out your intentions here. Sass extends the CSS @import rule and does not recreate it. According to the documentation:

@import takes a filename to import. By default, it looks for a Sass file to import directly, but there are a few circumstances under which it will compile to a CSS @import rule:

• If the file's extension is .css.
• If the filename begins with http://.
• If the filename is a url().
• If the @import has any media queries.

As a result, if you put the .css extension after the filename in an @import at-rule, Sass will just output this line of valid CSS code. You can test this by removing your @extend directive, which will make your code compile. You will see that the entire output file is this:

@import 'library.css';

Sass is not going to follow that CSS file and make it's contents available to the @extend directive.

What you could do is remove the file extension from your @import at-rule.

@import 'library';

.b {
 @extend .a
}

However, this will actually output the entire contents of the file library.css into your CSS file that this Sass file compiles to, which I am assuming is not your goal.

To fix that, you could create a partial Sass file that contains placeholder selectors.

%a {
  color: red;
}

The good thing about placeholder selectors is that they have no output of their own. According to the documentation:

On their own, without any use of @extend, rulesets that use placeholder selectors will not be rendered to CSS.

Their importance and usefulness is detailed on this page.

Import the partial Sass file in your Sass stylesheet and use the @extend directive like this:

.b {
  @extend %a;
}

And to make sure your library.css file is consistent, convert it into Sass, import the same partial file on top of it containing your placeholder selectors and simply use the @extend directive inside .a selector as well.

@import 'placeholders';

.a {
    @extend %a;
}