Question

HTML：

<section>
  <div class="container"></div>
</section>
<nav>
  <div class="container"></div>
</nav>

如何嵌套容器类？可能不是这样的：

section {
  .container {
  }
}

nav {
 .continer {
 }
}

因为我不想为.container加倍。而不是这样：

.container {
  section {
  }
  nav {
  }
}

因为容器在部分中，而不是容器中的部分。怎么样？

我可以使用＆＃34; ＆安培; ＆＃34;但是：

body {
  .container {
     section & {
     }
  }
}

将编译为：

 section body .container {
 }

但我需要：

body section .container {
}

Answer 1

您可以使用＆＃39;＆amp;＆＃39;来实现它。它引用了父选择器。

.container {
  section & {
    color: blue;
  }

  nav & {
    color: black;
  }
}

以上将编译为

section .container {
  color: blue;
}

nav .container {
  color: black;
}

上面提到的方式会反过来编译：

.container section {
}

这不是你想要的。

Answer 2

将样式添加到将在section和nav中显示的容器div：

geoCoder.geocodeAddressString(address) { (placemarks, error) in
   ...filtering code ...
   doTableViewStuff(data: joblist)
}

func doTableViewStuff(data: [Jobs]) { //or whatever type of data
   func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
       let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
       cell.textLabel = data[indexPath.row].ActivityID //or something else with the data 
   }
}

编译为

section, nav {
  .container {
      color: red;
  }
}

如何使用SASS在简单项目中嵌套容器类？

2 个答案: