css - Sass 可以识别大小并应用条件吗？

Question

我正在尝试在 Sass 中实现一个简单的容器。容器的最小高度为 60px，高度为 80px，里面有一个简单的段落。

现在，每当我在容器中添加一个新段落时，高度都会增加，具体取决于我在容器中插入的段落数。

我想知道的是，如果有任何方法可以设置一个条件，如果容器超过 100px 高度，边框将改变颜色。

谢谢大家!

Answer 1

注意:当使用 SASS 时，要记住两个不同的值时期:在编译时计算的值，即在转换为 CSS 时计算的值，以及在渲染时计算的值，即在浏览器应用转换后的 CSS 时计算的值。容器的计算高度值只能在渲染时知道。

最接近条件的 CSS 是它的选择器。 SASS 具有丰富的条件选择器，但与 CSS 一样，它们不能(而且可能永远不会)能够根据渲染时维度值选择元素。

仔细想想，这是有道理的。例如，如果您可以根据高度大于或小于固定值来选择元素，则可以为高度 > 100px 的元素设置一个选择器，将高度设置为 90px，为高度 < 100px 的元素设置一个选择器，将高度设置为到 110px，导致永无止境的逻辑循环。

在您的特定情况下，您可以使用诸如 :nth-child 之类的选择器来获得接近您要求的结果。如果您知道包含两个段落的容器的高度始终小于 100px，但是包含 3 个段落的容器的高度始终大于 100px，您可以定位第 3 个段落，也许使用它的 ::before 或 ::after 元素来创建边框。

div {
    position: relative;
}
div > p:nth-child(3)::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 3px solid red;
}

<h5>Two paragraphs will have no border</h5>
<div>
    <p>haha</p>
    <p>hoho</p>
</div>
<br/>
<h5>Three or more paragraphs will have a border</h5>
<div>
    <p>haha</p>
    <p>hoho</p>
    <p>haha</p>
    <p>hoho</p>
</div>

这可能与您要了解 SASS/CSS 中基于高度的条件语句一样接近。当然，如果您的段落具有可变高度，则此解决方案可能不起作用。