CODEWITHSUNDEEP
sassextend
Elise Chant
Elise Chant

Reputation: 5196

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;  
}

Upvotes: 6

Views: 3069

Answers (2)

Krasimir
Krasimir

Reputation: 13549

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.

Upvotes: 10

Vinay Raghu
Vinay Raghu

Reputation: 1279

@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

Upvotes: 1

Related Questions