Могу ли я проверить, что родительский элемент имеет определенный класс в sass?

Question

Я хочу присвоить значение условно, если родительский элемент имеет определенный класс.Exp:

HTML

<div class="parent">
    <div class="child">Some Text</div>
</div>

CSS

.child {
    font-size: 16px;
}

, но если у родительского элемента есть класс с именем "big""

HTML

<div class="parent big">
    <div class="child">Some Text</div>
</div>

Я хочу изменить значение следующим образом

CSS

.child {
    font-size: 20px;
}

Например, следующим образом:

.child {
  font-size: parent.hasClass('big') ? 20px : 16px;
}

Как я могу это сделать в SASS?

Answer 1

Невозможно использовать чистый CSS (вся идея каскадная).Но может быть способ использовать SASS.Проверьте это:

http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand

РЕДАКТИРОВАТЬ: другой вариант будет использовать JavaScript, как предложил Jpegzilla.

Answer 2

В CSS нет родительских селекторов.Что вы можете сделать, это установить размер шрифта в родительском классе и позволить детям наследовать его.

.parent {
    font-size: 16px;

    &.big {
        font-size: 20px;
    }
}

.child {
    font-size: inherit;
}

Или вы можете использовать переменные CSS (если вам не нужно слишком беспокоиться о IE)

--font-size: 16px;

.big {
    --font-size: 20px;
}

.parent {
    font-size: var(--font-size);
}

.child {
    font-size: inherit;
}

Надеюсь, это поможет:)

Answer 3

Просто создайте два правила:

.child {font-size: 16px;}
.big .child {font-size: 20px;}

---

В SASS это будет

.child
    font-size: 16px

    .big &
        font-size: 20px