img-替换为SASS

Question

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

基本上我有一个包括: @include img-replace("logo.png", 104px, 47px, inline-block); 我简单地改变图像的名称并定义像素的宽度和高度.

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

在这种情况下,图像具有:宽度:104px和高度:47px,因此他们不再担心它,因为下一个图像可以更大或更小.

那么这个有什么解决方案吗？谢谢.

$path--rel      : "../images";

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


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

Answer 1

使用 SASS，您可以针对 mixin 中的参数设置默认值；例如，在您的示例中，我将默认宽度指定为 104px，默认高度指定为 47px：

$path--rel: "../images";

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

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

如果$w、$h或$disp不存在，则渲染默认值。这本质上使它们成为可选的。