[css] LESS CSS 중첩 클래스

Program / 글쓴이

내 CSS를 개선하기 위해 LESS를 사용하고 있으며 클래스 내에 클래스를 중첩하려고합니다. 상당히 복잡한 계층 구조가 있지만 어떤 이유로 내 중첩이 작동하지 않습니다. 나는 이것을 가지고있다:

.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;
         }
    }
}

일을 할 수 없습니다 .g.posted. 그것은 단지 .g비트를 보여줍니다 . 이렇게하면 괜찮습니다.

.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;
         }
    }

나는 둥지 싶습니다 .posted에 .g불구하고. 어떤 아이디어?

답변

&문자가의 기능이 this키워드를 실제로 (일 나는 답을 작성하는 순간에 알지 못했다). 다음과 같이 작성할 수 있습니다.

.class1 {
    &.class2 {}
}

생성 될 CSS는 다음과 같습니다.

.class1.class2 {}

기록을 위해, @grobitto는이 정보를 처음으로 게시했습니다.

[원래 답변]

LESS는 이런 식으로 작동하지 않습니다.

.class1.class2 {} -동일한 DOM 노드에 두 개의 클래스를 정의하지만

.class1 {
    .class2 {}
}

중첩 된 노드를 정의합니다. .class2클래스가있는 노드의 자식 인 경우에만 적용됩니다 class1.

나도 이것과 혼동되었고 내 결론은 LESS에 this키워드가 필요하다는 것입니다 :).

답변

.g {
    &.posted {
    }
}

.posted 앞에 “&”를 추가해야합니다.

답변

앰퍼샌드가 중첩에서 자식 요소 바로 옆에 있으면 이중 클래스 선택기로 컴파일됩니다. &와 선택자 사이에 공백이 있으면 자식 선택 자로 컴파일됩니다. Less here의 중첩에 대해 자세히 알아보십시오 .

답변