在@mixin之外访问@mixin变量

Question

所以我有一个@mixin让我可以定义我的徽标宽度，并根据我的徽标图片的比例给出一个自动高度。

@mixin m-logoSize($width) {
  width: $width;
  height: floor($width / 4.72727272727273);
}

我试图找出是否有办法让我访问$width变量，因此我可以将其分配给不同的属性。

// sass

.logo {
  @include m-logoSize(300px);
  background-size: $width $height;
}

// translates to this css

.logo {
  width: 300px;
  height: 63px;
  background-size: 300px 63px;
}

是否有任何魔法使这成为可能。任何帮助表示赞赏。

提前致谢！

Answer 1

我认为你最好为这两个值设置全局变量，然后你可以在任何地方找到它们。

示例

// Global variables
$logo-width: 0 !default;
$logo-height: floor($logo-width / 4.72727272727273) !default;

// Mixin
@mixin m-logoSize() {  
  width: $logo-width;
  height: $logo-height;
}

// Sass
$logo-width: 300px;

.logo {
  @include m-logoSize();
  background-size: $logo-width $logo-height;
}

更新

要更改不同断点处的值，您只需在媒体查询的范围内设置变量。

响应示例

.logo {
  @media screen and (max-width: 600px) {
      $logo-width: 150px;
      @include m-logoSize();
      background-size: $logo-width $logo-height;
  }

  @media screen and (min-width: 601px) {
      $logo-width: 300px;
      @include m-logoSize();
      background-size: $logo-width $logo-height;
  }
}