ตัวเลือกเด็กทันทีใน LESS

112

จะมีการให้ LESS ใช้ตัวเลือกลูกทันที (>) ในผลลัพธ์หรือไม่?

ในสไตล์ของฉันฉันต้องการเขียนสิ่งที่ชอบ:

.panel {
    ...
    > .control {
        ...
    }
}

และมี LESS สร้างสิ่งที่ต้องการ:

.panel > .control { ... }

css css-selectors less

— เดฟ
แหล่งที่มา

stackoverflow.com/questions/7634932/less-js-strong-nested-rules

— 30

15

น่าสนุกที่ตัวอย่างในคำถามของคุณเป็นคำตอบที่ถูกต้องแล้ว

— 31

@thirtydot แน่นอนยกเว้นว่าจะไม่ทำงาน ... ไม่ใช่ถ้าคุณไม่ลบช่องว่างหรือเพิ่มเครื่องหมาย "&" ฉันใช้น้อย js. ไม่สามารถพูดได้อย่างแน่นอนสำหรับตัวแยกวิเคราะห์อื่น ๆ

— Dave

2

ฉันเพิ่งทดสอบและรหัสเดิมจากคำถามของคุณใช้งานได้ใน less.js ดูเอาเอง: jsfiddle.net/thirtydot/vcE8t

— สามสิบดอท

1

ใช่คำขอโทษของฉันมันใช้งานได้อย่างมีเสน่ห์กับพื้นที่ +1 สำหรับคุณ ฉันไม่รู้ว่ามันใช้ไม่ได้กับฉันเป็นเวลาหลายชั่วโมงเมื่อวานนี้ ... ไม่งั้นฉันคงไม่ได้โพสต์คำถาม

— Dave

144

UPDATE

อันที่จริงรหัสในคำถามเดิมใช้ได้ดี คุณสามารถใช้>ตัวเลือกเด็กได้

พบคำตอบ

.panel {
    ...
    >.control {
        ...
    }
}

สังเกตว่าไม่มีช่องว่างระหว่าง ">" และ "" มิฉะนั้นจะไม่ทำงาน

— เดฟ
แหล่งที่มา

4

ฉันจะไม่สงสัยเลยว่ามันเป็นข้อผิดพลาดถ้ามันใช้ไม่ได้กับช่องว่างที่นั่นเว้นแต่จะมีการจัดทำเป็นเอกสาร

— BoltClock

นี่เป็นเพียงการหลอกตัวแยกวิเคราะห์ .panel >.controlมันเห็นว่ามันเป็นตัวเลือกเดียวที่ให้คุณได้รับ

— Ricardo Tomasi

ฉันใช้มันเป็นคุณสมบัติมากกว่าจุดบกพร่อง มันสอดคล้องกันมากขึ้นเมื่อคุณใช้วิธีนี้เมื่อเทียบกับ "&" ฉันคิดว่ารหัสจะชัดเจนกว่าถ้าคุณใช้เฉพาะ "&" กับคลาสหลอกไม่ใช่คลาสย่อย

— Dave

1

เป็นคุณสมบัติของ CSS ซึ่งยอมรับทั้งdiv > pและdiv>p. ความสอดคล้องจะใช้ช่องว่างระหว่างตัวเลือกเสมอ (ดู CSS ที่สร้างขึ้น)

— Ricardo Tomasi

แน่นอน แต่ฉันกังวลกับความสม่ำเสมอของการใช้ &

— Dave

78

วิธีอย่างเป็นทางการ:

.panel {
  & > .control {
    ...
  }
}

& หมายถึงตัวเลือกปัจจุบันเสมอ

ดูhttp://lesscss.org/features/#features-overview-feature-nested-rules

— Ricardo Tomasi
แหล่งที่มา

1

ฉันคิดว่านี่เป็นเพียงการหลอกตัวแยกวิเคราะห์ (เช่นคุณรู้สึกเกี่ยวกับคำตอบอื่น ๆ ) ให้ฉันอธิบาย เช่นเดียวกับที่คุณกล่าว & อ้างถึงตัวเลือกปัจจุบัน (หลัก) เสมอ ดังนั้นสิ่งที่ตามมาควรนำไปใช้กับผู้ปกครอง และนั่นคือบทบาทของคลาสหลอก ชั้นเรียนเด็กในทันทีอยู่ใกล้กับ **** อ้าปากค้าง **** ชั้นเรียนเด็กมากกว่าชั้นหลอก ดังนั้นการใช้ just> จึงใช้งานง่ายและมีเหตุผลมากกว่า

— Dave

6

คุณคิดว่าอะไรถูกต้องกว่ากัน? div > pหรือdiv >p? &Combinator เป็นวิธีที่เป็นที่ยอมรับในการทำมันน้อยไม่ความรู้สึกของฉัน คำอธิบายของคุณเป็นไปในทางที่ผิด บางคนเขียน CSS เป็นบรรทัดเดียว ...

— Ricardo Tomasi

คนส่วนใหญ่ใช้ LESS ดังนั้นพวกเขาจึงไม่ต้องสนใจ CSS จริงที่สร้างขึ้น อย่างไรก็ตามปรากฎว่าสามารถใช้พื้นที่ได้หลังจาก> ดังนั้น & ซ้ำซ้อนอย่างแท้จริง

— Dave

13

ไวยากรณ์ที่ถูกต้องจะตามมาในขณะที่ใช้ "&" จะซ้ำซ้อนที่นี่

.panel{
   > .control{
   }
}

ตามหลักเกณฑ์น้อยกว่า '&' ใช้เพื่อกำหนดพารามิเตอร์บรรพบุรุษ (แต่ไม่จำเป็นต้องใช้ที่นี่) ในตัวอย่างน้อยนี้ , &: โฉบอยู่เหนือสิ่งสำคัญ: โฉบมิฉะนั้นก็จะส่งผลให้เกิดความผิดพลาดในประโยค อย่างไรก็ตามไม่มีข้อกำหนดทางวากยสัมพันธ์สำหรับการใช้ "&" ที่นี่ มิฉะนั้นการทำรังทั้งหมดจะต้องใช้ '&' เนื่องจากอ้างอิงถึงผู้ปกครองเป็นหลัก

— sbharti
แหล่งที่มา

1

@JJF ไม่มีคำถามเพราะมันคือคำตอบ?

— Bill Woodger

0

ในกรณีที่คุณต้องการกำหนดเป้าหมายตัวเลือกเพิ่มเติม:

.parent {
    >.first-child,
    >.second-child,
    >.third-child {
    ...
    }
}

— stojsins
แหล่งที่มา

-1

นอกจากนี้หากคุณกำหนดเป้าหมายองค์ประกอบลูกแรกเช่นองค์ประกอบแรก<td>ของ a <tr>คุณสามารถใช้สิ่งนี้ได้:

tr {
    & > td:first-child {font-weight:bold;}
}

ซึ่งจะช่วยลดการประกาศชั้นเรียนเมื่อไม่จำเป็น

— seth yount
แหล่งที่มา