Question

我正在与SCSS一起尝试创建一个响应站点。我正在使用Koala编译我的代码，并且有一个styles.scss正在导入我的其他部分样式表。更改宽度时，某些样式确实可以在我的网站上动态工作，但显示方式如下：flex;事情并没有改变我想要他们做的。

我尝试将媒体查询更改为嵌套在自己内部，但是没有任何工作正常。

styles.scss

@import "reset";

@import "variables";

// @media only screen and (min-width: 1em) {
@import "small-default";
// }

//35em is also 560px (if basefont is 16px)
@media only screen and (min-width: 560px) {
@import "medium";
}

//64em is also 1028px (if basefont is 16px)
@media only screen and (min-width: 1028px) {
@import "large";
}

index.html

<div class="footer">
        <footer>
          <div class="info">
              <div class="contact">
                <h2>Contact Us</h2>
                <p>CABOT CRUIZES</p>
                <p>23 South Main St. Suite 16</p>
                <p>Lexington, VA 24450</p>

                <br>
                <h2>Phone:</h2>
                <p>1-800-555-1234</p>

                <br>

                <h2>Hours of Operation:</h2>
                <p>Monday - Friday 9am - 4pm</p>
              </div>

              <div class="newsletter">
                <h2>News Letter</h2>
                <p>Subscribe to our email list and stay up-to-date with our hottest offers and latest specials.</p>

                <div class="subscribe">
                    <input type="email" name="" id="subscribeEmail">
                    <button type="submit">Subscribe</button>
                </div>
              </div>
            </div>  

              <div class="why">
                <h2>Why Cabot Cruises?</h2>
                <p>Cabot Cruises is a travel agency providing the best cruise deals on our online travel website. We can help you with all inclusive vacations including discounted cruises.</p>
                <br>
                <p>We do not sell travel to residents of Deleware, Iowa, Florida, Hawaii and Washington state because those states are just wierd. If you are a resident of one of these states, call your congressman and tell them to change the regulations. </p>
              </div>


        </footer>
      </div>

_small-default.scss

.footer {
  background-color: $secondaryColor;

  footer {
    max-width: 1024px;
    margin: 0 $gutter;
    padding: 1rem 0;
    color: $thirdColor;


    .info {
      margin: 0 auto;
      color: $thirdColor;

      display: flex;
      flex-direction: column;




      .contact, .newsletter, .why {
        padding: .5rem 0;
      }

      .contact {
      }

      .newsletter {
        display: flex;
        flex-direction: column;
        justify-content: center;


        .subscribe {
          display: flex;
          flex-direction: column;
          justify-content: center;

          input{
            height: 35px;
            margin-bottom: .2rem;
          }

          button {
            height: 44px;
            background-color: #666;
            border-radius: 10px;
            color: #fff;
          }
        }
      }

      .why {
      }



      h2{
        margin-bottom: .75rem;
      }
      input {
        margin-top: .6rem;
      }
    }


  }
}

_medium.scss （我只是想对布局进行简单的方向更改，但没有任何效果。）

footer {

    .info {
        flex-direction: row;
    }
}

Answer 1

将是

.footer {
  footer {
     .info {
        flex-direction: row;
    }
  }
}

或

.footer footer .info {
    flex-direction: row;
}

如果您要像在medium.scss中那样调用它

（SCSS）我的媒体查询在display上无法正常工作：flex;

1 个答案: