Ký &tự trong Sass là duy nhất ở chỗ nó đại diện cho bộ chọn hiện tại. Nó thay đổi khi bạn lồng vào nhau. Giả sử bạn đang lồng nhau, nhưng bạn muốn truy cập vào một bộ chọn sao lưu việc lồng nhau một chút. Bí quyết là lưu vào bộ nhớ cache và sử dụng nó sâu hơn trong lồng. Giống:
.parent ( $this: &; &--elem ( display: inline-block; &:hover, #($this)__variation--active & ( background: red; ) ) )Biên dịch thành:
.parent--elem ( display: inline-block; ) .parent--elem:hover, .parent__variation--active .parent--elem ( background: red; )(Cảm ơn Sergey Kovalenko đã gửi thủ thuật này!)
Có nghĩa là nó cho phép bạn sử dụng .parentvà .parent--elemtrong một bộ chọn cùng một lúc. Một chút bí truyền, nhưng đôi khi có thể hữu ích. Sắp xếp tránh các tình huống mà bạn có thể cần sử dụng @ at-root để sao lưu và tạo lại bộ chọn.
Ý chính của Sergey có các ví dụ dựa trên BEM:
- Page 1
- Page 2
$gray-very-light: #ccc; .pagination ( display: flex; padding: 0; list-style: none; $this: &; &__item ( border: 1px solid $gray-very-light; & + & ( margin-left: .5rem; ) ) &__link ( display: block; padding: .25rem .5rem; text-decoration: none; &:hover, #($this)__item--active & ( // Here we get .pagination from $this variable background-color: $gray-very-light; ) ) )Đầu ra:
.pagination ( display: flex; padding: 0; list-style: none; ) .pagination__item ( border: 1px solid #ccc; ) .pagination__item + .pagination__item ( margin-left: .5rem; ) .pagination__link ( display: block; padding: .25rem .5rem; text-decoration: none; ) .pagination__link:hover, .pagination__item--active .pagination__link ( background-color: #ccc; )