使用 Sass 基于视口动态显示静态图像

Question

我正在创建一个 React 应用程序，它在着陆页上有一个 hero 显示，显示三个图像之一：[hero-1.jpg, hero-2.png, hero-3.png] 基于用户 viewport screen尺寸。

我试图在网上找到显示实现此目的的 DRY 方法的资源，但没有成功，为了参与，我将保留我尝试过的这段代码 - 理论上对我来说很有意义。

N.B。我对 Sass/Scss

非常陌生

snippet.html

<section className="hero is-fullheight has-background-black">
      <div className="hero-body">
           <div className="container">
           </div>
      </div>
</section>

hero.scss

$i: 1;
$breakpoint-phone: 480px;
$breakpoint-tablet: 768px;
$breakpoint-desktop: 1024px;

@mixin modifier ($i:1) {
    @content;    
    @media only screen and (max-width:$breakpoint-phone) { $i: 2; }
    @media only screen and (max-width:$breakpoint-tablet) { $i: 3; }
    @media only screen and (max-width:$breakpoint-desktop) { $i: 1; }
}

.hero {
    background-position: center;
    background-size: cover
}

@include modifier {.hero {background-image: url('../assets/hero-#{$i}.jpg');}}

方法论:

默认显示内容（取自@include）。
Mixin modifier 会修改传给mixin的$i，在图片路径中插值

预期结果：根据每个断点，$i 将设置为适当的值并动态更改背景图像。

实际结果：使用全局$i，网页显示hero-1.jpg.

Answer 1

有几种方法可以实现这一点。如果我要这样做，我会这样做。

此外，实践移动优先开发是非常明智的。使用 min-width 向上而不是使用 max-width 向下。如果 $i 变量未在文档顶部设置为 1，则您当前的结构方式意味着您将没有有效的 URL。一旦你习惯了，写 SASS 或 CSS 就会容易得多。

$tablet: 768px;
$desktop: 1024px;

@mixin hero-image() {
  .hero {
  background-position: center;
  background-size: cover;
  background-image: url('../assets/hero-2.jpg');
  
  @media screen and (min-width: $tablet) {
     background-image: url('../assets/hero-3.jpg');
    }
    
   @media screen and (min-width: $desktop) {
    background-image: url('../assets/hero-1.jpg');
   }
  }
}

@include hero-image();

您仍然需要将 background-image 属性写 3 次。你这样做的方式很接近，但你必须在你的消费 scss 文件中 @include modifier() 3 次。在一天结束时 SASS 编译为 CSS。您可能会使用 SASS 函数或 For Loop 来实现此目的，但混合宏可能会变得非常复杂和强大，但也非常难以阅读和理解。这是我刚刚向您展示的 mixin 在 CSS.

中编译的内容

.hero {
  background-position: center;
  background-size: cover;
  background-image: url("../assets/hero-2.jpg");
}
@media screen and (min-width: 768px) {
  .hero {
    background-image: url("../assets/hero-3.jpg");
  }
}
@media screen and (min-width: 1024px) {
  .hero {
    background-image: url("../assets/hero-1.jpg");
  }
}

我建议在编译您的实际项目之前将您的 SCSS/SASS 放入此编译器中以查看结果。

https://www.sassmeister.com/

即使您在 mixin 中重复 background-image 3 次，这仍然是 DRY 代码，因为您可以在任何要显示图像的地方包含一个 mixin，如果您需要编辑它，您可以编辑它在一个地方。

使用 Sass 基于视口动态显示静态图像

Dynamically displaying static images based on view port using Sass

image

sass

viewport

responsive