[basic] LESS - Namespaces (네임스페이스)・Accessors (접근자)

※ CSS @namespace 또는 namespace 선택자와 혼동 금지 !!

Namespace (네임스페이스) 정의 

조직적 목적 또는 캡슐화 위해 믹스인을 그룹화 필요한 때 존재.

LESS 경우, 직관적 형태로 Namespace (= 재사용 범위) 표현.

즉, 

Namespace로 사용할 부분에 () 기호 추가. (아래 예제 참고)

 

Namespace (네임스페이스) 예제 

#bundle 안의 .button 클래스 부분만을 #header a 안에 믹스인.

#bundle() {

    .button {

        display: block;

        border: 1px solid black;

        background-color: grey;

        &:hover {

            background-color: white;

        }

    }

    .tab { ... }

    .citation { ... }

}

 

---

#header a {

    color: orange;

    #bundle.button();  // #bundle > .button 형식도 가능.

}

 

PS. CSS 출력 (예: #bundle .tab) 부분에 Namespace 코드가 안 보이게 하려면, 네임스페이스에 () 기호를 추가. (예: #bundle()).