Sass可以识别尺寸并应用条件吗？

Question

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

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

我想知道的是，是否有任何方法可以设置一个条件，即如果容器高度超过100像素，则边框会更改颜色。

感谢大伙们！

Answer 1

注意：使用SASS时，需要牢记两个不同的时间段：在编译时（即，当转换为CSS时）和渲染时（即，当浏览器应用了已转换的CSS时）计算的值。 容器的计算出的高度值只有在渲染时才能知道。

有条件的最接近的CSS是它的选择器。 SASS具有丰富的条件选择器，但像CSS一样，它们不能（而且很可能永远也不能）基于渲染时维度值选择元素。

当您考虑时，这很有意义。 例如，如果您可以根据高度大于或小于固定值来选择元素，则可以有一个选择器来选择高度> 100px的元素，将高度设置为90px，并为一个选择器选择一个高度选择为高度<100px的元素，将高度设置为到110px，导致永无止境的逻辑循环。

在您的特定情况下，您可以使用:nth-child这样的选择器来达到接近您所要求的结果。 如果知道两段容器的高度始终小于100px，而三段容器的高度始终大于100px，则可以使用第三个段落::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中达到基于高度的条件一样接近。 当然，如果您的段落的高度可变，则此解决方案可能不起作用。