Question

我创建了一个mixin来轻松操作图像并替换，现在我的应用程序正在增长，我不知道如何改进此代码。

基本上我有一个include：http.request()，我只需更改图像的名称并定义像素的宽度和高度。

我想改变它，因为现在，一些开发人员只想更改图像名称而不用再担心尺寸了解？

在这种情况下，图像具有：宽度：104px和高度：47px，因此他们不再担心它，因为下一张图像可能更大或更小。

那么为此提出任何解决方案？谢谢。

@include img-replace("logo.png", 104px, 47px, inline-block);

Answer 1

使用SASS，您可以根据mixin中的参数设置默认值。例如，在您的示例中，我默认指定宽度为104px，默认情况下高度为47px：

$w

如果$h，$disp或{{1}}不在，则会显示默认值。这基本上使它们成为可选的。

Answer 2

问题在于，如果您将尺寸设为可选，则该元素将没有宽度或高度。这意味着开发人员仍然需要确定元素的大小，否则它只会是0x0而且图片不会显示！

如果问题是开发人员懒得找不到并写下图像的大小，你总是可以使用地图来存储所有图像及其大小，因此该函数会根据图像值插入正确的大小。阅读更多here

Answer 3

所以，如果我理解正确，你想通过传递图像路径来使用这个mixin。但每个图像都有不同的大小。 SASS无法做到这一点。相反，您应该内联添加图像，例如：

<img src="images/logo.png" alt="">

或

<img src="images/logo.png" alt="" width="104" height="74">

否则上面@ chris-spittles的答案是正确的，这意味着你应该将默认的宽度和高度传递给你的mixin。如果你想继续使用mixin，你需要传递具有不同尺寸的图像的宽度和高度。

Answer 4

如前所述，如果将mixin更改为此 -

@mixin img-replace($img, $w: null, $h: null, $disp: block) {
  background-image: url('#{$path--rel}/#{$img}');
  background-repeat: no-repeat;
  display: $disp;
  width: $w;
  height: $h;
}

您可以灵活地使用代码，而无需分配宽度和高度参数。所以，现在，如果你写这个 -

.site-logo {
  @include img-replace("logo.png");
  margin-top: 8px;
  margin-left: 6px;
}

它将被编译为 -

.site-logo {
  background-image: url("../images/logo.png");
  background-repeat: no-repeat;
  display: block;
  margin-top: 8px;
  margin-left: 6px;
}

它还会保留您之前编写的代码，而不做任何更改。

现在，如果您有任何特定要求，例如为开发人员可以分配的不同类型的图像提供默认值，您可以在代码中添加地图 -

$small-img: ( w: 100px, h: 100px );
$medium-img: ( w: 200px, h: 200px );

现在你可以像这样打电话给img-replace -

.site-logo {
  @include img-replace("logo.png", $small-img...);
}
.site-medium-image {
  @include img-replace("logo.png", $medium-img...);
}

这将编译为 -

.site-logo {
  background-image: url("../images/logo.png");
  background-repeat: no-repeat;
  display: block;
  width: 100px;
  height: 100px;
}
.site-medium-image {
  background-image: url("../images/logo.png");
  background-repeat: no-repeat;
  display: block;
  width: 200px;
  height: 200px;
}

此...生成参数variable arguments

Sass支持“变量参数”，它们是最后的参数一个mixin或函数声明，它包含所有剩余的参数和将它们打包为列表。这些论点看起来很正常参数，但后跟......

img-替换为SASS

4 个答案: