CSS - 클래스 계층 구조?

Question

카탈로그, 홈페이지, 연락처 페이지, 우리에 관한 페이지 등이 포함 된 고객 프런트 엔드 사이트가 있습니다. 관리 프론트 엔드도 있습니다. 클래스 "admin"을 가진 요소 내의 어떤 요소라도 관리자 스타일 시트에 설정된 속성을 상속하고 고객 스타일 시트에서 상속받은 모든 종류의 계층을 구현하고 싶습니다. 이 기능의 목적은 관리자가 고급 프런트에 액세스 할 수있는 관리자 프런트 엔드에 로그인 할 수 있도록하지만, 기본 작업을 실행할 수있는 고객 프런트 엔드 (예 : 카탈로그 항목 숨기기, 실행 중 고객이 문제를보고하는 경우 디버그 스크립트 등). 고객 프론트 엔드의 모든 관리 도구에 고객 스타일 대신 관리자 스타일 시트에서 가져온 속성이 있어야합니다. 이렇게하면 배경색과 재료가 변경됩니다.

예를 들어, 일을 간단하게 네임 스페이스처럼 설정할 수있는 쉬운 방법이 있나요 : 난 그냥하고 싶지 해달라고

.admin .list {} 
.admin .list .list-item {} 
.admin a 

: 나는처럼 될 수있어

.admin { 
    .list { 
     .list-subtitle 
     { 
     } 
     .list-item 
     { 
     } 
    } 
    a 
    { 
    } 
} 
.customer 
{ 
    .list 
    { 
     .list-subtitle 
     { 
     } 
     .list-item 
     { 
     } 
    } 
    a 
    { 
    } 
} 

가 .admin 항상 퍼팅하십시오.

아무도 내가 이것을 할 수있는 방법에 대한 제안이 있습니까? 나는 이것을 설정하고 그것을 넣은 것에 따라 스타일 시트를 쓰는 .net 클래스를 작성할 수 있다고 생각하지만 스타일을 쉽게 읽을 수 없으므로 Classes와 같은 모든 종류의 클래스를 추가 할 수 있습니다. 추가 (어쩌구 저쩌구) 등등. 당신이 볼 수있는 답변에 미리

감사합니다 ...

감사합니다,

리처드 기본적으로

<ul class="customer"> 
    <li>Will appear as a customer control</li> 
    <li>Will appear as a customer control</li> 
    <li class="admin">Will appear as an admin control</li> 
</ul> 
<div class="customer"> 
    <ul class="admin"> 
     <li>Will appear as an admin control</li> 
     <li>Will appear as an admin control</li> 
     <li>Will appear as an admin control</li> 
    </ul> 
</div> 

는 I 클래스 "관리자"로 모든 요소를 ​​원하거나 내 클래스 "admin"을 가진 요소는 관리자 프론트 엔드에서와 같이 나타납니다. 그렇지 않으면 고객 프런트 엔드에서와 같이 나타납니다. 또한 다른 방법으로도 사용할 수 있으므로 관리자는 고객 프런트 엔드에 표시되는 것처럼 데이터베이스에 제출하기 전에 입력 한 내용을 미리 볼 수 있습니다.

CSS에서 네임 스페이스가 허용되면 문제가되지 않을 것입니다. 불행히도 Less와 같은 기능을 쉽게 구현할 수있는 유일한 방법 인 것 같습니다. (불행히도 전에 사용 해보지 않았기 때문에 불행히도 이것에 대해서는 매우 단단한 시간표를 사용하고 있습니다 - 나는 Less와 같은 도구에 대해 아무것도 가지고 있지 않습니다!).

감사합니다,

리처드

Answer 1

Less CSS 또는 SASS을 사용해 보았습니까?

Answer 2

가 네이티브 CSS의 방법은 없습니다,하지만 당신은 당신이 그런 식으로 쓰기 실제 CSS로 컴파일 할 수 LESS 같은 것을 사용할 수 있습니다.

HSS도 있습니다. 지정한 중첩 된 규칙도 지원합니다.