Question

我最近开始学习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>

Answer 1

通过缩进2个级别将媒体查询放入.toggle课程中，并从查询中删除其他.toggle。

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

我在这里分发你的片段：https://codepen.io/anon/pen/ooqxyW

Sass - 媒体查询

1 个答案: