Sass extending components (best practices)

If you were to follow BEM rules strictly, I think this is technically one example of how your HTML would look for a button:

<div class="btn">
  <a href="#" class="btn__link btn__link--primary btn__link--large">This is a button</a>
</div>

The div with the btn class is the block in BEM, and acts as a container. The anchor tag (a) with the class btn__link is the element in BEM. In BEM, the element will always be a child element of the block, so it must go inside it. The btn__link--primary and the btn__link--large classes are the modifiers in BEM which would contain button color rules and button size rules, respectively.

For elements like buttons, strictly following BEM rules will create extra div (or other container/block elements) in your HTML. IMO, for things like buttons, you should make exceptions to not follow BEM strictly. I would personally just ignore the block part of BEM with buttons, as you have done, so you don't have to wrap it in a div. I think the most important thing is that you stay consistent, and make sure others can easily understand your code if they pick it up.

As for how you have your code, there is one potential issue I see with it. If you have a set of btn rules that you extend to every modifier class, you will end up with duplicate code in your CSS.

For example, let's pretend this is your btn extend:

%btn {
  padding: 15px 30px;
  border: 0;
  border-radius : 4px;
  color: white;
  text-transform: uppercase;
  font-size : em(14px);
  font-weight: $font-weight--medium;
  transition: opacity $trns-duration;
  display: block;
}

Then you would have this code for your modifiers:

.btn {

  @include m(primary) {
    @extend %btn;
    color: green;
    background-color: pink;
  }

  @include m(secondary) {
    @extend %btn;
    color: blue;
    background-color: orange;
  }

  @include m(warning) {
    @extend %btn;
    color: white;
    background-color: red;
  }

}

You are going to end up with this as your CSS:

.btn--primary {
  padding: 15px 30px;
  border: 0;
  border-radius : 4px;
  color: white;
  text-transform: uppercase;
  font-size : em(14px);
  font-weight: 400;
  display: block;
  color: green;
  background-color: pink;
}

.btn--secondary {
  padding: 15px 30px;
  border: 0;
  border-radius : 4px;
  color: white;
  text-transform: uppercase;
  font-size : em(14px);
  font-weight: 400;
  display: block;
  color: blue;
  background-color: orange;
}

.btn--warning {
  padding: 15px 30px;
  border: 0;
  border-radius : 4px;
  color: white;
  text-transform: uppercase;
  font-size : em(14px);
  font-weight: 400;
  display: block;
  color: white;
  background-color: red;
}

See all those repetitive lines of code? Your HTML will look cleaner the way you proposed, but your CSS will end up with lots of lines repeated.