Расширенная структура SCSS: например, динамические переменные в зависимости от существования определенного родительского / внешнего класса - PullRequest
Новая
       7

Расширенная структура SCSS: например, динамические переменные в зависимости от существования определенного родительского / внешнего класса

0 голосов
/ 28 сентября 2019

Я пытаюсь выяснить, может ли быть реализована следующая логика, которая допускает более модульный подход, или нет:

Задача:

Я получил три основных категории вМое приложение: бег, плавание, езда на велосипеде, каждый со своей темой / цветом, например,

scss: 

$category-colors: (
    'running': red;
    'swimming': blue;
    'biking': green;
)

Во всем приложении определенные компоненты и вложенные компоненты должны адаптироваться, например, их фоновыйцвет к цвету контекста, то есть цвет к одной из категорий.Ниже приведен один из таких компонентов:

html: 

<div class="running">
    <div class="form">
        <div class="form__header">
            <h3>New</h3>
        </div>
        <div class="form__content">
            <p>Some text</p>
        </div>
    </div>
</div>

scss: 

.form {
  &__header {
    height: 100px;

    // 'running' is not available here but it illustrates what I'm trying to achieve
    background: map-get($category-colors, 'running');
  }
  &__content {
    height: 50vh;
  }
}

Цвет фона должен быть динамически установлен в зависимости от наличия родительского /дедушка / н-родитель running.Есть ли какой-нибудь способ получить «категорию» динамически?

Я мог бы добавить суффикс для класса, который должен принять эту тему / цвет, например form__header_running, но я не смог найти способ извлечь «бег»в качестве переменной для сопоставления цвета.

Я пробовал что-то вроде следующего, но переменные каким-то образом всегда оказываются последними в этой цепочке, что означает «велосипед», даже если biking неприсутствует у родителей. 

.form {
  $bgColor: black !default;

  .running & {
    $bgColor: map-get($category-colors, 'running')
  }

  .swimming & {
    $bgColor: map-get($category-colors, 'swimming')
  }

  .biking & {
    $bgColor: map-get($category-colors, 'biking')
  }

  &__header {
    height: 100px;
    background: $bgColor;
  }

  &__content {
    height: 50vh;
  }

  // image much more children/sub children, so the simple use of $bgColor would be much more efficient
}

Любая идея / концепции о том, как добиться того, чего я хочу?

Любые входные данные по структуре / архитектуре стиля, которые вы выбрали бы для более крупного приложения с аналогичными требованиями?

С нетерпением ждем обсуждения!

...