Shows Error - failed to extend when a class is extended in SASS

Question

.class{
  color:#333;
}

.ex-class{
 @extend .class;
}

Shows error:

".ex-class" failed to extend ".class"
The selector ".class" was not found.
This will be an error in future releases of Sass
Use "@extend .class !optional" if the extend should be able to fail

---

What makes me in trouble, Sass is compiled fine on all other git Repos on my system, I tried by changing the Sass versions, My team member works fine with this Sass and same version.

Solution

@extend warning were introduced in Sass 3.2.0:

Any @extend that doesn't match any selectors in the document will now print a warning. These warnings will become errors in future versions of Sass. This will help protect against typos and make it clearer why broken styles aren't working.

In Sass 3.3.0, it stop to warn the user, simply throwing an error:

Sass will now throw an error when an @extend that has no effect is used. The !optional flag may be used to avoid this behavior for a single @extend.

Please note that @extend has been subject to many bug fix in Sass history (3.1.13, 3.2.5, 3.2.6, 3.2.8 and 3.2.9), and that particularly when it's used with media queries. I would recommend you and your team to use at least Sass v3.3.0.

If your code if written "as it", you shouldn't have any error/warning. If you're using @import, or if the block is wholly/partly written inside a media query, there could have issues.

Comments

[ithil]

are they one right below the other as in the example? or are they in separate stylesheets?

[asp]

Seperate stylesheets and are included, My team member works fine with this

[ithil]

are you including them in the right order? first the '.class' declaration and then the '@extend'

[asp]

Yes all are included in correct order, Also this Sass works fine for my Team members

[zessx]

Which version are YOU using please?

[asp]

I am using Sass 3.4.6 and My Team mates uses Sass 3.2.18 and Sass 3.4.4

[zessx]

"My team member works fine with this Sass and same version." => 3.4.6 != 3.2.18 != 3.4.4...

[Vishnu Pradeep]

Thanks. I was stuck in this for some hours.

[asp]

What are the ways for overcome this issue?

[zessx]

For his particular example, I would have chosen to use a placeholder instead of an @extend.

[asp]

Is it be possible to get corrected for using @extend by downgrading of Sass version? If so which version should I used? Is the error is removed by make use of @extend .class-name !optional on the Sass? Thanks for ur support

[zessx]

You won't have the warning anymore if you're using !optional. But, if you're using Sass 3.4, you should not even have it.