Is It Possible in SASS to Inherit from a Class in Another File

Is it possible in SASS to inherit from a class in another file?

YES! its possible.

If you want all <button> elements to inherit the .btn class from Twitter Bootstrap's Default buttons

In your styles.scss file you would have to first import _bootstrap.scss:

@import "_bootstrap.scss";

Then below the import:

button { @extend .btn; }

Including another class in SCSS

Looks like @mixin and @include are not needed for a simple case like this.

One can just do:

.myclass {
  font-weight: bold;
  font-size: 90px;
}

.myotherclass {
  @extend .myclass;
  color: #000000;
}

Is it possible to have a local class inherit all classes imported from a file?

This is possible using Sass (Scss).

Example:

test1.scss

.elem {
  background: red;
  @import 'test2';
}

test2.scss

.inner {
  background: blue;
}

.outer {
  background: green;
}

@media (max-width: 500px){
  .something {
    color: black;
  }
}

Output:

.elem {
  background: red; }
  .elem .inner {
    background: blue; }
  .elem .outer {
    background: green; }
  @media (max-width: 500px) {
    .elem .something {
      color: black; } }

Inherit class properties from another file in scss

To inherit styles from class, you should use @extend keyword. If the parent class is defined in another file, this file has to be first imported with @import directive:

// A.scss
.A {
  border-radius: 20px;
}

// B.scss
@import 'A';

.B {
  @extend .A;
  border-width: 2px;
}

This compiles to the following CSS:

.A, .B {
  border-radius: 20px;
}

.B {
  border-width: 2px;
}

You can try it online here.

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

How to @extend from another sass file, or how to achieve OOSASS?

The problem is here:

#intro {@extend ruddy; @extend fullwidth}
aside {@extend ruddy;}
.thing {@extend fullwidth;}

ruddy and fullwidth aren't selectors. If you're extending the .ruddy class, you need to include the period, as that is part of the selector.

#intro {@extend .ruddy; @extend .fullwidth}
aside {@extend .ruddy;}
.thing {@extend .fullwidth;}

Can a CSS class inherit one or more other classes?

There are tools like LESS, which allow you to compose CSS at a higher level of abstraction similar to what you describe.

Less calls these "Mixins"

Instead of

/* CSS */

#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

You could say

/* LESS */

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

---

Related Topics