LESS CSS 중첩 클래스

101

내 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불구하고. 어떤 아이디어?

css nested less

— newbie_86
소스

답변:

192

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

.class1 {
    &.class2 {}
}

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

.class1.class2 {}

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

[원래 답변]

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

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

.class1 {
    .class2 {}
}

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

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

— Mingos
소스

sass& 연산자에 내장 된 기능이 있습니다.

— sevenseacat

LESS는 여전히 굉장합니다. 특히 PHP LESS 전처리 기가 수정되고 더 유연한 구문을 가지고 있습니다. 그러나 일반적으로 받아 들여지는 구문이 있기 전까지는 이러한 문제가 수시로 발생합니다. 제 생각에는 이것이 유일한 단점입니다.

— mingos

@ newbie_86 sass와 네이티브 css 구문을 혼합 할 수 없습니다. 따라서 Sass로 마이그레이션하려면 스타일을 완전히 다시 작성해야하며, 적은 비용으로 기존 스타일을 이미 컴파일하고 하나씩 다시 작성하기 시작할 수 있습니다.

— 토플리스

두 번째 답변은 동일하고 후자의 날짜에도 불구하고 왜 두 번째 답변이이 답변보다 더 많은 업이 있는지 궁금했습니다. 그럼 모두 답변을 마지막 문장을보고 올렸

— llamerr

@topless "당신은 sass와 네이티브 CSS 구문을 혼합 할 수 없습니다"라는 말이 무슨 뜻입니까? 저는 몇 년 동안 그것을 해왔습니다. 나를 위해 잘 작동합니다.

— Shanimal

115

.g {
    &.posted {
    }
}

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

— Grobitto
소스

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

— 네샤 조릭
소스