CSS - иерархии классов? - PullRequest
       10

CSS - иерархии классов?

3 голосов
/ 30 апреля 2010

У меня есть сайт с клиентским интерфейсом, на котором есть каталог, домашняя страница, страница контактов, страница о нас и так далее. Существует также интерфейс администрации. Я хотел бы реализовать своего рода иерархию, где любые элементы в элементе с классом «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 (бла ) и т. д.

Заранее спасибо за любые ответы ...

С уважением,

Richard

<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!).

С уважением,

Richard

Ответы [ 2 ]

7 голосов
/ 30 апреля 2010

Вы изучали использование Меньше CSS или SASS ?

5 голосов
/ 30 апреля 2010

Нет собственного способа CSS, но вы можете использовать что-то вроде LESS , что позволит вам написать это и скомпилировать в настоящий CSS.

Также есть HSS , который также поддерживает вложенные правила, подобные тем, которые вы указали.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...