如何复用CSS类并按需修改不同层级的属性？

我需要复用一个CSS类，但要根据条件修改部分属性。比如我想合并以下两个类来减少重复（实际场景里重复属性更多）：

&__logo-small {
    color: $white;
    display: block;
    max-width: 3rem;

    &--link {
        display: flex;
        flex-direction: row;
        height: 3rem;
        width: 3rem;  
    }
}

&__logo-big {
    color: $white;
    display: block;
    max-width: 6rem;

    &--link {
        display: flex;
        flex-direction: row;
        height: 6rem;
        width: 6rem;  
    }
}

这让我很头疼，因为要修改的属性在不同层级里。如果是单层级我可以用继承，但现在不知道该怎么做。这种需求能实现吗？

补充上下文 #

我需要支持两种Logo格式：旧格式叫logo，新格式叫desktopLogo，它们的渲染方式不同。HTML代码如下：

<img *ngIf="logo" class="navbar__logo" [src]="logo" alt="logo">
<a 
  *ngIf="desktopLogo"
  class="navbar__logo"
  (click)="onItemClicked(desktopLogo)"
  [attr.id]="desktopLogo.id"
>
  <img class="navbar__logo--link" [src]="desktopLogo.icon" alt="logo">
</a>

注意：navbar__logo--link类仅适用于新版Logo。

感谢大家的热心解答，我已经通过Pete的建议解决了问题！

内容的提问来源于stack exchange，提问作者Emiliano Rodriguez