CSS - 類層次結構？

Question

我有一個客戶前端網站，其中有一個目錄，主頁，聯繫頁面，關於我們頁面等。還有一個管理前端。我想實現一種層次結構，其中具有類「admin」的元素中的任何元素都將繼承管理樣式表中設置的屬性，並從客戶樣式表繼承其他任何內容。這樣做的目的是讓管理員可以在管理員前端登錄，他們可以訪問許多高級內容，但他們也可以導航到客戶前端，在那裏他們可以執行基本任務（例如隱藏目錄項目，運行如果客戶報告問題，則爲調試腳本等）。我希望客戶前端的所有管理工具都具有來自管理樣式表而不是客戶的屬性 - 這將改變背景顏色和內容。

有沒有簡單的方法來建立類似命名空間，使事情變得更簡單，例如：

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

我知道這可能是這樣的：

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

我只是不希望有始終堅持把.admin。

有沒有人對我如何做到這一點有任何建議？我想我可以編寫一個.net類來設置它，並根據輸入的內容寫入一個樣式表，但之後我無法讀取樣式，所以很容易添加，會有各種類似Classes.Add（blah ） 等等。

預先感謝任何答覆......

問候，

理查德

<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> 

基本上，你可以看到，我想帶班 「admin」 的任何元素，或在一個類爲「admin」的元素將在管理前端顯示。否則，它們會像在客戶前端那樣出現。這也可以用於其他方式，因此管理員可以在將其提交到數據庫之前預覽他們所輸入的內容，因爲它會出現在客戶前端。

如果在CSS中允許命名空間，這將是沒有問題的 - 不幸的是像Less這樣的東西似乎是我唯一可以輕鬆實現的選項。 （我說不幸，因爲我以前從未使用過它，而且我對此非常嚴格的時間限制 - 我沒有反對像Less這樣的工具！）。

問候，

理查德

Answer 1

您是否使用Less CSS或SASS？

Answer 2

有沒有本地CSS方法，但你可以使用類似LESS，這將使你把它寫這樣的，把它編譯成真正的CSS。

還有HSS，它也支持像您指定的嵌套規則。