Sass รวมพาเรนต์โดยใช้เครื่องหมายและ (&) กับตัวเลือกประเภท

ฉันมีปัญหากับการทำรังใน Sass สมมติว่าฉันมี HTML ต่อไปนี้:

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

เมื่อฉันพยายามซ้อนสไตล์ของฉันในสิ่งต่อไปนี้ฉันได้รับข้อผิดพลาดในการคอมไพล์:

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

ฉันจะอ้างอิงตัวเลือกประเภทก่อนตัวเลือกหลักได้อย่างไรเมื่อเป็นส่วนหนึ่งขององค์ประกอบเดียวกัน

เป็นจุดมาร์ออกมานี้ได้รับเป็นไปได้ตั้งแต่ 3.3.0.rc.1 (Maptastic Maple)Sass

คำสั่ง @ at-root ทำให้กฎอย่างน้อยหนึ่งกฎถูกปล่อยออกมาที่รูทของเอกสารแทนที่จะถูกซ้อนอยู่ใต้ตัวเลือกหลัก

เราสามารถรวม@at-rootคำสั่งพร้อมกับการแก้ไข#{}เพื่อให้ได้ผลลัพธ์ที่ตั้งใจไว้

SASS

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

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

CSS เอาต์พุต

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

@at-rootวิธีเท่านั้นจะไม่แก้ปัญหาหากคุณตั้งใจที่จะขยายตัวเลือกที่อยู่ใกล้ขึ้นโซ่ ตัวอย่างเช่น:

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

จะรวบรวมเพื่อ:

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

ถ้าคุณต้องการเข้าร่วมแท็ก.elementแทน#idล่ะ?

มีฟังก์ชันใน Sass ที่เรียกselector-unify()ว่าแก้ปัญหานี้ ใช้นี้กับมันเป็นไปได้ที่จะกำหนดเป้าหมาย@at-root.element

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

จะรวบรวมเพื่อ:

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

สำหรับ starters, (ในขณะที่เขียนคำตอบนี้) ไม่มีไวยากรณ์เขื่องที่ใช้ตัวเลือกและ ถ้าคุณจะทำอะไรแบบนั้นคุณต้องมีช่องว่างระหว่างตัวเลือกกับเครื่องหมายและ ตัวอย่างเช่น:

.item {
    .helper & {

    }
}

// compiles to:
.helper .item {

}

วิธีอื่นในการใช้เครื่องหมายและอาจเป็นสิ่งที่คุณกำลังมองหา (ไม่ถูกต้อง):

.item {
    &.helper {

    }
}

// compiles to:
.item.helper {

}

สิ่งนี้ช่วยให้คุณสามารถขยายตัวเลือกด้วยคลาสอื่น ๆ ID ตัวเลือกหลอก ฯลฯ น่าเสียดายสำหรับกรณีของคุณสิ่งนี้จะรวบรวมในทางทฤษฎีกับบางสิ่งเช่น. itema ซึ่งเห็นได้ชัดว่าไม่ได้ผล

คุณอาจต้องคิดใหม่ว่าคุณกำลังเขียน CSS ของคุณอย่างไร มีองค์ประกอบหลักที่คุณสามารถใช้ได้หรือไม่?

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

ด้วยวิธีนี้คุณสามารถเขียน SASS ของคุณได้อย่างง่ายดายในลักษณะต่อไปนี้:

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

(หมายเหตุด้านข้าง: คุณควรดู html ของคุณคุณกำลังผสมเครื่องหมายคำพูดเดี่ยวและคู่และใส่แอตทริบิวต์ href ในแท็ก p)

AFAIK ในกรณีที่คุณต้องการรวมแอมเพอร์แซนด์สำหรับคลาสและแท็กในเวลาเดียวกันคุณต้องใช้ไวยากรณ์นี้:

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

จะคอมไพล์

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

การใช้งานอื่น ๆ (เช่นการใช้คลาสก่อนหน้า@at-rootหรือใช้หลาย ๆ@at-root ) จะทำให้เกิดข้อผิดพลาด

หวังว่าจะเป็นประโยชน์

คุณลักษณะนี้มีอยู่ใน Sass เวอร์ชันใหม่ล่าสุด 3.3.0.rc.1(Maptastic Maple)

คุณลักษณะที่เกี่ยวข้องอย่างใกล้ชิดสองประการที่คุณต้องใช้คือสคริปต์&ซึ่งคุณสามารถแก้ไขภายในสไตล์ที่ซ้อนกันเพื่ออ้างอิงองค์ประกอบหลักและ@at-rootคำสั่งซึ่งจะวางตัวเลือกหรือบล็อกของ css ต่อไปนี้ไว้ที่รูททันที (จะไม่ มีผู้ปกครองคนใดอยู่ใน css ที่ยื่นออกมา)

ดูปัญหา Github นี้สำหรับรายละเอียดเพิ่มเติม