Is it possible to @extend a class defined in a .css file to a .scss file?

Question

For example:

app.scss

@import url('orange.css');  
@import 'navel.scss';

orange.css

.orange {  
  color: orange;  
}

navel.scss

.navel {  
    @extend .orange;  
}

Answer 1

In SASS if you add

@import "test.css";

or

@import url("test.css");

it is compiled to pure css @import directive. Because the file has a .css extension, the SASS preprocessor thinks that this is pure CSS and the code inside is not involved in the SASS language operations. In your example, if you try to extend .orange you will get:

The selector ".orange" was not found.

Shortly: the extending is possible only if you use SASS files.

Answer 2

@extend is not possible by importing a CSS file. You have to

1. convert your css into an SCSS partial (or file)
2. @import this partial
3. @extend CSS classes

The downside to this is you would be left with duplication. Supposed this import is a 7000 line long CSS file (like bootstrap), then you are going to be in trouble