Динамическое отображение статических изображений на основе порта просмотра с использованием Sass

Question

Я создаю приложение React с отображением hero на целевой странице, на котором отображается одно из трех изображений: [hero-1.jpg, hero-2.png, hero-3.png] в зависимости от размера пользователя viewport screen.

Iбезуспешно пытаясь найти в Интернете ресурсы, показывающие СУХОЙ метод для достижения этой цели, ради участия я оставлю этот код, который я пытался сделать - в теории это имело смысл для меня.

NB Ячрезвычайно новый для 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');}}

Методология :

1. Отображение содержимого по умолчанию (которое извлекается из @include).
2. Mixin modifier изменит $i, переданное в mixin,который интерполируется в пути изображения.

Ожидаемый результат : На основе каждой точки останова $i будет установлено соответствующее значение и динамически изменено фоновое изображение.

Фактический результат : используется глобальный $i, и на веб-странице отображается hero-1.jpg.

Answer 1

Есть несколько способов добиться этого. Если бы я собирался об этом, вот как я бы это сделал.

Кроме того, было бы очень разумно практиковать мобильную первую разработку. Используйте min-width и идите вверх вместо max-width, спускаясь вниз. То, как вы сейчас это структурируете, будет означать, что у вас не будет действительного URL, если эта переменная $i не установлена ​​в 1 в верхней части документа. Написание 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 раза. То, как вы это делали, было близко, но вам пришлось бы @include modifier() 3 раза использовать ваш файл scss. В конце дня SASS компилируется в CSS. Вы можете потенциально использовать функцию SASS или For Loop для достижения этой цели, но миксины могут быть действительно сложными и мощными, но также невероятно трудными для чтения и понимания. Вот какой миксин, который я только что показал, компилируется в 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/

Даже если вы повторяете фоновое изображение 3 раза внутри миксина, это все еще СУХОЙ код, потому что вы можете включать этот миксины везде, где будут отображаться ваши изображения, и если вам нужно отредактировать его, вы можете отредактировать его в одном месте.