extend from class name in another file sass

Question

So I'm currently doing some styling, following the BEM standard.

An example of what I'm doing could be this:

.block{ 
  &__element {
  }
}

what i would like to do is this:

// file a 
.block {
 ...
}

-

// file b
// add magic to reference the `block`class in file a  
&__elelemnt {
 ...
}

What I'm currently doing:

// file a 
.block {
 ...
}

-

// file b
.block__elelemnt {
 ...
}

(manually adding the block part to the name)

Is there any way to reference this in a smarter way?

Thanks in advance

Answer 1

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