How to import not the whole file in scss / sass, but prohibit one style?

Question:

Bootstrap has a style for links and buttons, dotted around the element + color + underline on the :focus event, it looks like this:

a {
  color: $link-color;
  text-decoration: none;

  &:hover,
  &:focus {
    color: $link-hover-color;
    text-decoration: $link-hover-decoration;
  }

  &:focus {
    @include tab-focus;
  }

and

@mixin tab-focus() {
  // Default
  outline: thin dotted;
  // WebKit
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

If outline: none; you can still do it after importing .scss in your file, but what to do with the color and underline, if you need the color and underline to remain the same, that is, if there was a blue link with an underline, then when clicked, it should remain the same . If you specify a specific color and underline, then for another, for example, a red link without an underline, it will change, and not remain itself.

That is, you need not to import these styles at all, or somehow delete them after import. After all, editing .scss sources is wrong? Then how to remove all :focus s?

Answer:

In this case, you need to write your own mixin like @mixin tab-focus() , only with parameters that you can specify for specific classes. it turns out

@mixin tab-focus($outline_dotted, $outline_offset, $outline_size ) {
  outline: $outline_dotted;
  // WebKit
  outline: $outline_size ;
  outline-offset: $outline_offset
}

a{
&:focus {
    @include tab-focus('none', '-2px', '5px');
  }
}