css - 重用CSS类改变一些属性

Question

我需要重用 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;  
    }
}

我发现这很棘手，因为变化发生在不同的级别。如果它是单一级别，我可以使用继承，但在这种情况下我陷入困境。

这样的事情可以实现吗？

编辑:我添加了一段 HTML 以获得更好的上下文。

我想做的是为两种 Logo 提供支持。

旧格式称为“logo”，新格式称为“desktopLogo”。它们的呈现方式不同。

<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 仅适用于新版本。

感谢大家的友好回答，我按照皮特的建议成功了!

Answer 1

我认为您使用的修饰符是错误的 - 在这种情况下修饰符会很小和很大。

我将从基类开始，然后使用修饰符更改位

&__logo {
  color: $white;
  display: block;
  max-width: 3rem;
  
  &-link {
    display: flex;
    flex-direction: row;
    height: 3rem;
    width: 3rem;
    
    &--big {
      height: 6rem;
      width: 6rem;
    }
  }
  
  &--big {
    max-width: 6rem;
  }
}

a normal logo would look like this:
<a href="class__logo-link"><img class="class__logo"></a>

a big logo would look like this:
<a href="class__logo-link class__logo-link--big"><img class="class__logo class__logo--big"></a>

如果你的 html 结构类似于上面，你可能只想在链接上放置修饰符，那么你可以这样做

&__logo {
  color: $white;
  display: block;
  max-width: 3rem;
  
  &-link {
    display: flex;
    flex-direction: row;
    height: 3rem;
    width: 3rem;
    
    &--big {
      height: 6rem;
      width: 6rem;
      
      .class__logo {
         width: 6rem;
      }
    }
  }
}

a normal logo would look like this:
<a href="class__logo-link"><img class="class__logo"></a>

a big logo would look like this:
<a href="class__logo-link class__logo-link--big"><img class="class__logo"></a>