WedX - журнал о программировании и компьютерных науках

Темы на основе классов SASS

Я пытаюсь придумать способ создания темы на основе классов с использованием SASS, но, поскольку я новичок в этом, я недостаточно знаю, чтобы заставить ее работать, или знаю, стоит ли моя попытка того.

Я хочу, чтобы тема была основана на классе, который установлен либо в теге HTML, либо в теге Body. Затем все цвета, фоны и т. д. являются производными от этого.

Я хочу, чтобы SASS выполнял всю работу на ногах. Пожалуйста, извините за грубый пример, поскольку я говорю, что я новичок в этом:

$baseBackground: #0f0;

.blue { 
    $baseBackground: #0f0;
}
.red {
    $baseBackground: #0f0;
}
.header {
    background: $baseBackground;
}

Если блок кода выше SASS, я хочу, чтобы CSS выглядел так:

.header {
    background: #0f0;
}
.blue .header { 
    background: #00f;
}
.red .header{
    background: #f00;
}

Я понятия не имею, возможно ли это или нет. Очевидно, что приведенный выше пример не работает. Есть ли способ справиться с этим без создания дополнительных стилей?

Большое спасибо за ваше время.

Крис

css sass compass-sass
19.03.2013

Ответы:


1

Я думаю, что лучшим решением будет использование миксинов SASS. Вы можете настроить определение примеси для своей темы с различными цветами в качестве аргументов примеси. Затем вы можете вызывать свои миксины с разными значениями аргументов для разных тем. Вот пример, немного расширенный от вашего, который показывает использование нескольких аргументов и имеет разделы «заголовок» и «нижний колонтитул»:

@mixin theme($background-color, $text-color) {
    .header {
        background: $background-color;
    }

    .footer {
        background: $background-color;
        color: $text-color;
    }
}

@include theme(#0f0, white);

.blue {
    @include theme(#00f, lightgray);
}

.red {
    @include theme(#f00, gray);
}

Скомпилированный CSS из этого примера будет выглядеть так:

.header {
    background: lime;
}
.footer {
    background: lime;
    color: white;
}

.blue .header {
    background: blue;
}
.blue .footer {
    background: blue;
    color: lightgrey;
}

.red .header {
    background: red;
}
.red .footer {
    background: red;
    color: gray;
}
20.03.2013
Новые материалы
Объяснение документов 02: BERT
BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
Учебные заметки: создание моего первого пакета Node.js
Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..
Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..
Для любых предложений по сайту: [email protected]