Kiến thức cơ bản về Sass - bài 3 Lồng nhau (Nesting)

Lượt xem: 3615

Lồng nhau (Nesting)

Khi viết HTML, bạn có thể nhận thấy rằng nó có một hệ thống phân cấp trực quan và lồng nhau rõ ràng. CSS, mặt khác, thì không như vậy.
Sass sẽ cho phép bạn lồng các bộ chọn CSS theo cách phân cấp trực quan giống như HTML của bạn.
Xin lưu ý rằng các quy tắc lồng nhau quá mức sẽ dẫn đến CSS quá kém có thể chứng minh là khó duy trì và thường bị coi là thực tiễn xấu.
Với ý nghĩ đó, đây là một ví dụ về một số kiểu điển hình cho điều hướng của trang web.
Cú pháp SASS

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

Cú pháp SCSS
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Đầu ra CSS


nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Bạn sẽ nhận thấy rằng ul, li và bộ chọn được lồng bên trong bộ chọn điều hướng. Đây là một cách tuyệt vời để sắp xếp CSS của bạn và làm cho nó dễ đọc hơn.
 
Nguồn sass-lang.com