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

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

Ví dụ sau:

HTML

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

SCSS

.container {
    background:red;
    color:white;

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

Điều này làm việc tuyệt vời.

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

Trong mẫu ở 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.containerthường là rednhưng div.container.descsẽ có màu xanh.

Làm thế nào tôi có thể lồng cái này vào bên trong containervới Sass?

Bạn có thể sử dụng tham chiếu bộ chọn cha & , nó sẽ được thay thế bởi bộ chọn cha 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 &hoàn toàn sẽ giải quyết, vì vậy nếu chọn cha mẹ của bạn được lồng riêng của mình, làm tổ sẽ được giải quyết trước khi thay thế &.

Ký hiệu này thường được sử dụng để viết các phần tử giả và các lớp :

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

Tuy nhiên, bạn có thể đặt &ở hầu hết mọi vị trí bạn thích ^* , do đó, điều sau đây cũng có thể xảy ra:

.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ồng của bạn và do đó có thể làm tăng nỗ lực tìm 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 phép ở phía trước &. Vì vậy, bạn không thể thực hiện nối trực tiếp selector+ &- #id&sẽ gây ra lỗi.

Nếu đó là trường hợp, tôi nghĩ bạn cần sử dụng một cách tốt hơn để tạo một tên lớp hoặc quy ước tên lớp. Ví dụ, như bạn đã nói, bạn muốn .containerlớp có màu khác nhau tùy theo cách sử dụng hoặc diện mạo cụ thể. Bạn có thể làm được việc 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;
}

Mã ở trên được dựa trên Phương pháp BEM trong các quy ước đặt tên lớp. Bạn có thể kiểm tra liên kết này: BEM - Phương pháp sửa đổi thành phần khối

Câu trả lời của Christoph là hoàn hảo. Tuy nhiên, đôi khi bạn có thể muốn đi nhiều lớp hơn một. Trong trường hợp này, bạn có thể thử các tính năng @at-rootvà #{}css cho phép hai lớp gốc ngồi cạnh nhau bằng cách sử dụng& .

Điều này sẽ không hoạt động (do nothing before &quy tắc):

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

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

Nhưng điều này sẽ (sử dụng @at-root plus #{&}):

container {
    background:red;
    color:white;
    
    @at-root .desc#{&} {
      background: blue;
    }

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