Sass kết hợp cha mẹ bằng cách sử dụng ký hiệu và (&) với bộ chọn loại

Tôi đang gặp sự cố khi làm tổ trong Sass. Giả sử tôi có HTML sau:

<p href="#" class="item">Text</p>
<p href="#" class="item">Text</p>
<a href="#" class="item">Link</a>

Khi tôi cố gắng lồng các kiểu của mình vào phần sau, tôi gặp lỗi biên dịch:

.item {
    color: black;
    a& {
        color:blue;
   }
}

Làm cách nào để tham chiếu bộ chọn kiểu trước bộ chọn mẹ khi nó là một phần của cùng một phần tử?

Như Kumar đã chỉ ra , điều này đã có thể xảy ra kể từ khi có Sass 3.3.0.rc.1 (Maptastic Maple).

Chỉ thị @ at-root khiến một hoặc nhiều quy tắc được phát ra ở phần gốc của tài liệu, thay vì được lồng vào bên dưới các bộ chọn cha của chúng.

Chúng ta có thể kết hợp @at-rootchỉ thị cùng với phép nội suy#{} để đi đến kết quả dự kiến.

SASS

.item {
    color: black;
    @at-root {
        a#{&} {
            color:blue;
        }
    }
}

// Can also be written like this.
.item {
    color: black;
    @at-root a#{&} {
        color:blue;
    }
}

CSS đầu ra

.item {
    color: black;
}
a.item {
    color: blue;
}

Các @at-rootphương pháp -only sẽ không giải quyết được vấn đề nếu bạn có ý định mở rộng selector gần nhất lên chuỗi. Ví dụ:

#id > .element {
    @at-root div#{&} {
        color: blue;
    }
}

Sẽ biên dịch thành:

div#id > .element {
    color: blue;
}

Điều gì xảy ra nếu bạn cần tham gia thẻ của mình .elementthay vì #id?

Có một chức năng trong Sass được gọi là selector-unify()giải quyết vấn đề này. Sử dụng điều này với @at-rootnó là có thể nhắm mục tiêu .element.

#id > .element {
    @at-root #{selector-unify(&, div)} {
        color: blue;
    }
}

Sẽ biên dịch thành:

#id > div.element {
    color: blue;
}

Đối với người mới bắt đầu, (tại thời điểm viết câu trả lời này) không có cú pháp sass nào sử dụng bộ chọn & . Nếu bạn định làm điều gì đó như vậy, bạn cần có khoảng cách giữa bộ chọn và ký hiệu và. Ví dụ:

.item {
    .helper & {

    }
}

// compiles to:
.helper .item {

}

Cách khác để sử dụng dấu và có thể là những gì bạn (không chính xác) đang tìm kiếm:

.item {
    &.helper {

    }
}

// compiles to:
.item.helper {

}

Điều này cho phép bạn mở rộng bộ chọn với các lớp khác, ID, bộ chọn giả, v.v. Thật không may cho trường hợp của bạn, điều này về mặt lý thuyết sẽ biên dịch thành một cái gì đó như .itema rõ ràng là không hoạt động.

Bạn có thể chỉ muốn nghĩ lại cách bạn đang viết CSS của mình. Có phần tử mẹ nào bạn có thể sử dụng không?

<div class="item">
    <p>text</p>
    <p>text</p>
    <a href="#">a link</a>
</div>

Bằng cách này, bạn có thể dễ dàng viết SASS của mình theo cách sau:

.item {
    p {
        // paragraph styles here
    }
    a {
        // anchor styles here
    }
}

(Lưu ý bên cạnh: bạn nên xem qua html của mình. Bạn đang trộn các dấu ngoặc kép và dấu ngoặc kép VÀ đặt thuộc tính href trên thẻ p.)

AFAIK Trong trường hợp bạn muốn kết hợp ký hiệu và cho lớp và thẻ cùng một lúc, bạn cần sử dụng cú pháp sau:

.c1 {
  @at-root h1#{&},
    h2#{&}
    &.c2, {
    color: #aaa;
  }
}

sẽ biên dịch thành

h1.c1,
h2.c1,
.c1.c2 {
  color: #aaa;
}

Các cách sử dụng khác (như sử dụng lớp trước @at-roothoặc sử dụng nhiều @at-roots) sẽ dẫn đến lỗi.

Hy vọng nó sẽ hữu ích

Tính năng này đã có trong phiên bản mới nhất của Sass, 3.3.0.rc.1(Maptastic Maple)

Hai tính năng có liên quan chặt chẽ mà bạn sẽ cần sử dụng là có thể tập lệnh &, bạn có thể nội suy trong các kiểu lồng nhau để tham chiếu đến các phần tử mẹ và lệnh @at-root, đặt bộ chọn hoặc khối css ngay sau ở gốc (nó sẽ không có cha mẹ nào trong css đầu ra)

Xem sự cố Github này để biết thêm chi tiết