Search code examples
sassextend

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

For example:

app.scss

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

orange.css

.orange {  
  color: orange;  
}

navel.scss

.navel {  
    @extend .orange;  
}
Solution

  • 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.