LESS CSS 중첩 클래스

LESS CSS 중첩 클래스

---

내 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 {}
}

defines nested nodes. .class2 will only be applied if it is a child of a node with the class class1.

I've been confused with this too and my conclusion is that LESS needs a this keyword :).

---

.g {
    &.posted {
    }
}

you should add "&" before .posted

---

If the ampersand is located right next to the child element in nesting, it is compiled into a double class selector. If there is space between & and selector it will be compiled into child selector. Read more about nesting in Less here.

참고URL : https://stackoverflow.com/questions/5117133/less-css-nesting-classes