Sass - 媒体查询答案

【问题标题】：Sass - media queriesSass - 媒体查询
【发布时间】：2018-03-13 21:14:51
【问题描述】：

我最近开始学习 sass，但在媒体查询方面遇到了问题。有些类有效，有些则无效，例如切换类。

这是我正在处理的代码：

body {
  font-family: sans-serif;
}

nav {
  width: 100%;
  background: #00316b;
}
nav ul {
  width: 80%;
  margin: 0 auto;
  padding: 0;
}
nav ul li {
  list-style: none;
  display: inline-block;
  padding: 20px;
}
nav li:hover {
  background: #e91e63;
}
nav a {
  color: #fff;
  text-decoration: none;
}
nav .toggle {
  padding: 10px 20px;
  box-sizing: border-box;
  color: #f7f7f7;
  font-size: 30px;
  cursor: pointer;
  width: 30px;
  display: none;
}
nav .toggle:hover div {
  width: 30px;
}
nav .toggle div {
  height: 4px;
  background: white;
  margin: 5px 0;
  border-radius: 25px;
  transition: all 0.3s ease-in-out;
}
nav .toggle .one {
  width: 30px;
}
nav .toggle .two {
  width: 20px;
}
nav .toggle .three {
  width: 25px;
}

@media (max-width: 768px) {
  .toggle {
    display: block;
  }
}

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/style.css">
  <!-- font awesome -->
  <script src="https://use.fontawesome.com/495f5a11b6.js"></script>
  <title>Document</title>
</head>
<body>
  <nav class='navigation'>
    <div class="toggle">
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
    </div>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

</body>
</html>

【问题讨论】：

标签： sass media-queries

【解决方案1】：

通过缩进 2 个级别将媒体查询放入您的 .toggle 类中，并从您的查询中删除另一个 .toggle。

.toggle
    // etc ...
    @media (max-width: $breakpoint)
        display: block

我在这里分叉了你的 sn-p：https://codepen.io/anon/pen/ooqxyW

【讨论】：