SASS -scss背景图像链接

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

<u>不是slide1的子元素，因此将close slide移至close }，然后设置样式slide{}

See working code

.slide1..

Answer 2

slide1不是class slide的子级，您可以在sass中使用两个这样的类来定位元素：

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