MNIEJ klas zagnieżdżania CSS

101

Używam MNIEJ, aby ulepszyć mój CSS i próbuję zagnieździć klasę w klasie. Hierarchia jest dość skomplikowana, 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ć się .g.posteddo pracy. to tylko pokazuje .g. Jeśli to zrobię, to 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ć się .postedw .gśrodku. Jakieś pomysły?

newbie_86
źródło

Odpowiedzi:

192

&Postać posiada funkcję thishasła, rzeczywiście (a co mi nie wiedział w momencie pisania odpowiedzi). Można napisać:

.class1 {
    &.class2 {}
}

a wygenerowany CSS będzie wyglądał następująco:

.class1.class2 {}

Dla przypomnienia, @grobitto jako pierwszy opublikował tę informację.


[ORYGINALNA ODPOWIEDŹ]

LESS nie działa w ten sposób.

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

.class1 {
    .class2 {}
}

definiuje węzły zagnieżdżone. .class2zostanie zastosowany tylko wtedy, gdy jest dzieckiem węzła z klasą class1.

Ja też byłem z tym zdezorientowany i doszedłem do wniosku, że MNIEJ potrzebuje thissłowa kluczowego :).

mingos
źródło
5
sassma tę funkcję wbudowaną w operator &.
sevenseacat
2
LESS jest nadal niesamowity, zwłaszcza preprocesor PHP LESS, ze zmodyfikowaną, bardziej elastyczną składnią. Ale dopóki nie będzie jakiejś powszechnie akceptowanej składni, takie problemy będą się pojawiać od czasu do czasu. Moim zdaniem to MNIEJSZA wada.
mingos
1
@ newbie_86 Nie można mieszać składni sass i natywnej składni css. Tak więc migracja do Sass wymaga całkowitego przepisania stylów, podczas gdy w mniejszym stopniu możesz już skompilować istniejące style i zacząć je ponownie pisać kawałek po kawałku.
topless
1
Byłem ciekawy, dlaczego druga odpowiedź ma więcej wzlotów niż ta, mimo że jest taka sama i ma drugą datę. Potem zobaczyłem ostatnie zdanie i podniosłem obie odpowiedzi
llamerr
@topless, co masz na myśli mówiąc „Nie można mieszać składni sassa i natywnej css”. Robię to od lat. U mnie działa świetnie.
Shanimal
115
.g {
    &.posted {
    }
}

przed wysłaniem należy dodać „&”

grobitto
źródło
2

Jeśli ampersand znajduje się tuż obok elementu podrzędnego podczas zagnieżdżania, jest kompilowany do podwójnego selektora klas. Jeśli między & a selektorem jest spacja, zostanie on wkompilowany w selektor potomny. Przeczytaj więcej o zagnieżdżaniu w Less tutaj .

Nesha Zoric
źródło