SASS -scss background-image link

Question

Я пытаюсь создать полноэкранный слайдер изображений для проекта с sass-слайдером, который предполагается отображать для мобильной версии на половине экрана:

html выглядит так:

        <div id="slideShow"class="wrap">
            <div id="arrow-left" class="arrow"></div>
            <div id="slider">
                <div class="slide slide1">
                    <div class="slide-content" >
                        <span>Image One</span>
                    </div>
                </div>
                <div class="slide slide2">
                    <div class="slide-content">
                        <span>Image Two</span>
                    </div>
                </div>
                <div class="slide slide3">
                    <div class="slide-content">
                        <span>Image Three</span>
                    </div>
                </div>
                <div class="slide slide4">
                    <div class="slide-content">
                        <span>Image Four</span>
                    </div>
                </div>
            </div>
            <div id="arrow-right" class="arrow"></div>
        </div>

и мой файл scss выглядит так:

#background{


    .wrap{
        position: relative;
        width: 100%;
        height: 50vh;
        overflow: hidden;

        .slide{
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-color: none;

            .slide1{background-image: url('../../img/photo/32205901_10216113101158488_4707111253917564928_n.jpg')}
            .slide2{background-image: url('../../img/photo/27748300_10213965746245449_4810004832094893115_o.jpg')}
            .slide3{background-image: url('../../img/photo/23905655_10155338212644615_4950099036934162252_n.jpg')}
        }
    }

но изображение не загружается, я не знаю, почему, если у кого-то есть лучший способ сделать это, большое спасибо

Answer 1

slide1 не является потомком класса slide, вы можете настроить таргетинг на элементы с двумя классами, как это в sass:

.slide{ 
  /*general styles for slide, like background, ..*/
  &.slide1 {
    /*styles that should apply to .slide.slide1*/
    background-image: ....;
  }
  &.slide2 {
    /*same for slide 2*/
  }

Answer 2

slide1 не является потомком slide, поэтому переместите закрытие } для закрытия slide{}, затем введите .slide1..

См. Рабочий код

.wrap{
        position: relative;
        width: 100%;
        height: 50vh;
        overflow: hidden;

   .slide{
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-color: none;
      } /* close here the .slide then style silde1\2\3 */
            .slide1{background-image: url('https://i.stack.imgur.com/3mG2d.jpg')}
            .slide2{background-image: url('https://i.stack.imgur.com/3mG2d.jpg')}
            .slide3{background-image: url('https://i.stack.imgur.com/3mG2d.jpg')}
 }