Sass .scss: Làm tổ và nhiều lớp?

Question

Tôi đang sử dụng Sass (.scss) cho dự án hiện tại của mình.

Tiếp theo ví dụ:

HTML

<div class="container desc"> 
    <div class="hello"> 
     Hello World 
    </div> 
</div> 

SCSS

.container { 
    background:red; 
    color:white; 

    .hello { 
     padding-left:50px; 
    } 
} 

này hoạt động tuyệt vời.

Tôi có thể xử lý nhiều lớp trong khi sử dụng kiểu lồng nhau hay không.

Trong ví dụ trên tôi đang nói về điều này:

CSS

.container.desc { 
    background:blue; 
} 

Trong trường hợp này tất cả div.container thường sẽ red nhưng div.container.desc sẽ là màu xanh.

Làm cách nào để lồng vào bên trong container bằng Sass?

Answer 1

Bạn có thể sử dụng parent selector reference&, nó sẽ được thay thế bằng bộ chọn cha mẹ sau khi biên dịch:

Ví dụ của bạn:

.container { 
    background:red; 
    &.desc{ 
     background:blue; 
    } 
} 

/* compiles to: */ 
.container { 
    background: red; 
} 
.container.desc { 
    background: blue; 
} 

Các & sẽ hoàn toàn giải quyết, vì vậy nếu chọn cha mẹ của bạn được lồng chính nó, việc lồng ghép sẽ được giải quyết trước khi thay thế &.

Ký hiệu này thường được sử dụng để viết pseudo-elements and -classes:

.element{ 
    &:hover{ ... } 
    &:nth-child(1){ ... } 
} 

Tuy nhiên, bạn có thể đặt & ở hầu như bất kỳ vị trí nào bạn thích ^*, vì vậy sau đây là tốt quá:

.container { 
    background:red; 
    #id &{ 
     background:blue; 
    } 
} 

/* compiles to: */ 
.container { 
    background: red; 
} 
#id .container { 
    background: blue; 
} 

Tuy nhiên, hãy lưu ý rằng điều này bằng cách nào đó phá vỡ cấu trúc làm tổ của bạn và do đó có thể làm tăng nỗ lực tìm kiếm một quy tắc cụ thể trong biểu định kiểu của bạn.

*: Không có ký tự nào khác ngoài khoảng trắng được cho phép trước &. Vì vậy, bạn không thể kết nối trực tiếp selector + & - #id& sẽ phát sinh lỗi.

Answer 2

Nếu đúng như vậy, tôi nghĩ bạn cần sử dụng cách tạo tên lớp hoặc quy ước tên lớp tốt hơn. Ví dụ: như bạn đã nói bạn muốn lớp .container có màu khác nhau theo cách sử dụng hoặc giao diện cụ thể.Bạn có thể làm điều này:

SCSS

.container { 
    background: red; 

    &--desc { 
    background: blue; 
    } 

    // or you can do a more specific name 
    &--blue { 
    background: blue; 
    } 

    &--red { 
    background: red; 
    } 
} 

CSS

.container { 
    background: red; 
} 

.container--desc { 
    background: blue; 
} 

.container--blue { 
    background: blue; 
} 

.container--red { 
    background: red; 
} 

Đoạn mã trên được dựa trên BEM Phương pháp trong công ước lớp đặt tên. Bạn có thể kiểm tra liên kết này: BEM — Block Element Modifier Methodology