& erweitern zeigt keine Übereinstimmungen, wenn Element existiert

Question

Ich benutze weniger CSS für eine einfache Website, als ich versuchte, &extend von weniger seiner zeigt kein Übereinstimmungselement verwenden, wenn das Element existiert.

Ich erstellte eine Dummy-Umgebung das gleiche Problem existiert. Hier ist mein Code

style.less

@import 'style1.less'; 
 
@colorgreen: #00ff00; 
 
@colorred: #ff0000; 
 
@fontsize: 20px; 
 
@bsolid: solid; 
 
@bdash: dashed; 
 
.container { 
 
    border: 1px@bsolid #ccc; 
 
    padding: 10px; 
 
    .myclass { 
 
    border: 1px@bdash #ccc; 
 
    padding: 10px; 
 
    h1 { 
 
     color: @colorred; 
 

 
font-size: @fontsize; 
 

 
    } 
 
    p { 
 
     color: @colorred; 
 

 
font-size: @fontsize; 
 

 
    } 
 
    } 
 
} 
 
.extend { 
 
    border: 1px solid #ccc; 
 
    padding: 10px; 
 
    h2 { 
 
    color: green 
 
    } 
 
    p { 
 
    &: extend(h2); 
 
    font-style: italic; 
 
    } 
 
}

<div class="container"> 
 
    <div class="myclass"> 
 
    <h1>Second Heading</h1> 
 
    <p>LESS enables customizable, manageable and reusable style sheet for web site.</p> 
 
    </div> 
 

 
    <div class="importClass"> 
 
    <p>This is imported CSS.</p> 
 
    </div> 
 

 
    <div class="extend"> 
 
    <h2>First in extend</h2> 
 
    <p>Second in extend</p> 
 
    </div> 
 
</div>

Answer 1

Wie die offizielle Less Website zeigt, desto weniger Compiler bei der kompilierten CSS-Selektor aussieht, wenn extend Verarbeitung.

Im Wesentlichen sieht die Erweiterung auf die kompilierten CSS, nicht das Original weniger.

Also, wenn ein verschachtelten Wähler zu verlängern versuchen, sollen wir den vollen Selektor in den extend und nicht nur die inneren Wähler bieten. Im Beispiel in Frage, CSS-Selektor die zusammengestellt wäre .extend h2 und so, wenn die extend Anweisung h2 nur als Eingabe zur Verfügung gestellt, es nicht und nicht ausgegeben alles passen würde.

Also würde das unten kompilieren erfolgreich und arbeiten wie erwartet.

.extend{ 
    border: 1px solid #ccc; 
    padding: 10px; 
    h2{ 
    color: green 
    } 
    p{ 
    &:extend(.extend h2); 
    font-style: italic; 
    } 
} 

Wenn kompiliert, würde es in der folgenden CSS führen:

.extend { 
    border: 1px solid #ccc; 
    padding: 10px; 
} 
.extend h2, 
.extend p { 
    color: green; 
} 
.extend p { 
    font-style: italic; 
}