How to Extend a Class from a CSS File in SASS

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

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

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

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.

How to extend a class from an imported SCSS?

I don't think the import statement is correct. Try @import 'shared.scss'

Similar issue to https://stackoverflow.com/a/51480665/271012

Why people use '@extend' in SCSS?

It helps you write DRY code quickly. @extend can be very useful when used properly.

It allows a selector to extend the styles of another selector, essentially providing a form of sub-classing. @extend works by combining selectors into a single comma-separated selector.

I.e. -

.A {
    font-size: 1rem;
    color:red;
}

.a{
    @extend .A;
    line-height: normal;
   }

Which outputs:

.A,.a {
   font-size: 1rem;
    color:red;
}

.a{
   line-height: normal;
}

SASS - Extend class across multiple files

That's what placeholders made for. Instead of this:

.stretch { color: #F00 }
.a { @extend .stretch; }
.b { @extend .stretch; }
.c { @extend .stretch; }

use this:

%stretch { color: #F00 }
.a { @extend %stretch; }
.b { @extend %stretch; }
.c { @extend %stretch; }

It will produce the following css:

.a, .b, .c {
  color: red; 
}

I.e. the stretch class is not included in the final compiled CSS, but you could still use it in SASS.

extend from class name in another file sass

You can have this file structure:

block-1/
--block-1.scss
--element-1.scss
--element-2.scss
block-2/
--block-1.scss
--element-1.scss
--element-2.scss

And import elements files info block files.

block.scss:

.block {
    color: red;

    @import "element-1.scss";
    @import "element-2.scss";
}

element-1.scss:

&__element-1 {
    color: green;
}

Compiles to:

.block {
    color: red;

    &__element-1 {
        color: green;
    }
}

How to override css styles when @extend from other class in scss?

Then which selector in most below this will apply this is general rule for any CSS file.

Height will be <div class="a b"> 200px;

.a {
    height: 100px;
    width: 100px;
    }   
.b {
    @extend .a;
    height: 200px;
}

Height will be <div class="a b"> 100px;

.b {
    @extend .a;
    height: 200px;
}
.a {
    height: 100px;
    width: 100px;
}

Always height will be <div class="a b"> 200px order dose not matter;

.a {
    height: 100px;
    width: 100px;
    &.b {
       height: 200px;
    }
}

Sass @extend vs adding class to component

The two main benefits of @extend are:

1. using inheritance like features in CSS/sass
2. keeping the HTML markup clean and writing all messy styling things only in styling files

Refer: this article https://www.sitepoint.com/the-benefits-of-inheritance-via-extend-in-sass/

---

Related Topics