bộ chọn sass-nesting-

---

Sass cho phép bạn dễ dàng lồng các bộ chọn của bạn và sắp xếp các luật của bạn theo thứ bậc:

.main {
  background-color: antiquewhite;
  margin: 0 auto;

  img {
    max-width: 100%;
    transform: rotate(3deg);
  }
  p:first-child {
    font-size: 1.2em;
span {
  background-color: burlywood;
  padding: 0.2em 0.4em;
}

Ở trên, sau khi được biên dịch sang CSS, sẽ mang lại những điều sau:

.main {
  background-color: antiquewhite;
  margin: 0 auto;
}
.main img {
  max-width: 100%;
  transform: rotate(3deg);
}
.main p:first-child {
  font-size: 1.2em;
}
.main p:first-child span {
  background-color: burlywood;
  padding: 0.2em 0.4em;
}

Thuộc tính trong cùng một không gian tên

Bạn cũng có thể lồng các thuộc tính trong cùng một không gian tên. Ví dụ, các thuộc tính nền có thể được lồng vào nhau như thế này. Lưu ý việc sử dụng dấu hai chấm sau từ khóa nền trong ví dụ:

.main {
  margin: 0 auto;

Điều này sẽ mang lại CSS sau:

.main {
  margin: 0 auto;
  background-color: antiquewhite;
  background-image: url(images/gator.svg);
  background-repeat: repeat-x;
  background-size: 36px 48px;
}

👉 Việc lồng ghép quá nhiều có thể tạo ra CSS lộn xộn, vì vậy hãy giữ nó ở mức tối đa chỉ sâu một vài cấp.

---

---

Các tin liên quan