我可以检查父元素在sass中有特定的类吗？

Question

如果父元素具有特定的类，我想有条件地分配值。经验：

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

只需创建两个规则：

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

---

在SASS中应该是

.child
    font-size: 16px

    .big &
        font-size: 20px

Answer 2

使用纯CSS是不可能的（整个想法是层叠的）。但是可能有一种使用SASS的方法。检查一下：

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

编辑：另一个选择是使用JavaScript，如建议的Jpegzilla。

Answer 3

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

希望有帮助：）