Mniej klas zagnieżdżania CSS

Question

Mniej klas zagnieżdżania CSS

Używam mniej do ulepszania CSS i próbuję zagnieżdżać klasę w klasie. Jest dość skomplikowana hierarchia, ale z jakiegoś powodu moje zagnieżdżanie nie działa. Mam to:

.g {
    float: left;
    color: #323a13;
    .border(1px,#afc945);
    .gradient(#afc945, #c8da64);
    .common;
    span {
        .my-span;
        .border-dashed(1px,rgba(255,255,255,0.3));
    }
    .posted {
         .my-posted;
         span {
            border: none;
         }
    }
}

Nie mogę dostać .g.posted do pracy. pokazuje tylko .g bit. Jak to zrobię to będzie dobrze:

.g {
    float: left;
    color: #323a13;
    .border(1px,#afc945);
    .gradient(#afc945, #c8da64);
    .common;
    span {
        .my-span;
        .border-dashed(1px,rgba(255,255,255,0.3));
    }
}

.g.posted {
         .my-posted;
         span {
            border: none;
         }
    }

Chciałbym jednak zagnieździć .posted W .g. Jakieś pomysły?

92

css nested less

Author: John Slegers, 2011-02-25

Source

3 answers

.g {
    &.posted {
    }
}

Powinieneś dodać " & " przed .posted

112

Author: grobitto,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-11-30 12:40:24

Jeśli ampersand znajduje się tuż obok elementu potomnego w zagnieżdżeniu, jest kompilowany do selektora podwójnych klas. Jeśli pomiędzy & a selektorem znajduje się Spacja, zostanie on skompilowany do selektora potomnego. Dowiedz się więcej o zagnieżdżaniu w Less tutaj .

2

Author: Nesha Zoric,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-21 08:20:42

score 177 · Accepted Answer

[EDITED ANSWER]

Ponieważ zostałem przegłosowany bez żadnego komentarza lub uzasadnienia, czuję się zobowiązany do zareagowania na to, co czuję jak może być przyczyną przegłosowania.

Znak & ma funkcję słowa kluczowego this, właściwie (czego nie wiedziałem w momencie pisania odpowiedzi). Można napisać:

.class1 {
    &.class2 {}
}

A wygenerowany CSS będzie wyglądał tak:

.class.class2 {}

Dla przypomnienia, @grobitto był pierwszym, który napisał ta informacja.

[ORYGINALNA ODPOWIEDŹ]

LESS tak nie działa.

.class1.class2 {} - definiuje dwie klasy na tym samym węźle DOM, ale

.class1 {
    .class2 {}
}

Definiuje zagnieżdżone węzły. .class2 zostanie zastosowana tylko wtedy, gdy jest potomkiem węzła z klasą class1.

Też się z tym pomyliłem i doszedłem do wniosku, że mniej potrzebuje this słowa kluczowego :).