Các kiểu CSS lồng nhau ~ Tôi đã thấy khái niệm này ở đâu trước đây?

Tôi không thể tìm thấy điều này bây giờ nhưng tôi đã đọc nó trước đây trên các blog khác nhau thảo luận về chủ đề này. Tôi sẽ đưa ra một ví dụ và hy vọng nó rõ ràng (mặc dù nó có thể không làm rõ bất cứ điều gì cả).

Đưa ra phần đánh dấu này (tùy ý về mục đích):

<div class="myWrapper">
  <a href="somepage.url" class="img">
    <img url="someimage.url">
  </a>
</div>
<div class="yourWrapper">
  <a href="somepage.url" class="img">
    <img url="someimage.url">
  </a>
</div>

Trong khi CSS có thể đọc như thế này:

.myWrapper .img img {border: thin black solid;}
.myWrapper .img {margin:10px;}
.yourWrapper .img img {border: thick red dashed;}
.yourWrapper .img {margin:20px;}

Nó cũng có thể được viết như thế này:

.myWrapper {
  .img { 
    margin:10px;
    img {
        border: thin black solid;
    }
  }
}
.yourWrapper {
  .img { 
    margin:10px;
    img {
        border: thick red dashed;
    }
  }
}

Nhưng tôi không thể nhớ đã nhìn thấy nơi đó đã được thảo luận hoặc nếu đó là một cái gì đó trong công trình. Có ai biết tôi đang nói cái quái gì không?

Và tôi không nghĩ rằng đây là một câu hỏi SO hoặc tôi sẽ đặt nó trên SO.

BÀI CSS

ngôn ngữ bản định kiểu năng động được thiết kế bởi Alexis Sellier. Nó bị ảnh hưởng bởi Sass và đã ảnh hưởng đến cú pháp "SCSS" mới hơn của Sass, nó đã điều chỉnh cú pháp định dạng khối giống như CSS của nó. LESS là nguồn mở. Phiên bản đầu tiên của nó được viết bằng Ruby, tuy nhiên trong các phiên bản sau, việc sử dụng Ruby đã bị phản đối và được thay thế bằng JavaScript. Cú pháp thụt lề của LESS là một ngôn ngữ kim loại lồng nhau , vì CSS hợp lệ là mã LESS hợp lệ với cùng một ngữ nghĩa. LESS cung cấp các cơ chế sau: biến, lồng, mixin, toán tử và hàm; sự khác biệt chính giữa LESS và các trình biên dịch CSS khác là LESS cho phép biên dịch theo thời gian thực thông qua LESS.js bởi trình duyệt.] LESS có thể chạy ở phía máy khách và phía máy chủ hoặc có thể được biên dịch thành CSS đơn giản ...

LESS sử dụng những phong cách lồng nhau.

#header {
  color: red;
  a {
    font-weight: bold;
    text-decoration: none;
  }
}

Ngoài ra, sass và scss hỗ trợ làm tổ.

Sass là một phần mở rộng của CSS3, thêm các quy tắc lồng nhau, các biến, mixin, kế thừa bộ chọn và hơn thế nữa. Nó được dịch sang CSS chuẩn, được định dạng tốt bằng cách sử dụng công cụ dòng lệnh hoặc plugin khung web.

Sass có hai cú pháp. Cú pháp được sử dụng phổ biến nhất được biết đến với tên gọi là SCSS Cảnh (đối với CSS Sassy CSS) và là siêu cú pháp của CSS3. Điều này có nghĩa là mọi biểu định kiểu CSS3 hợp lệ cũng là SCSS hợp lệ. Các tệp SCSS sử dụng phần mở rộng .scss.

Cú pháp thứ hai, cũ hơn được gọi là cú pháp thụt lề (hoặc chỉ là .sass.). Lấy cảm hứng từ sự căng thẳng của Haml, nó dành cho những người thích sự đồng nhất hơn là sự tương đồng với CSS. Thay vì dấu ngoặc và dấu chấm phẩy, nó sử dụng thụt dòng để chỉ định các khối ...