Примечание. При использовании SASS следует учитывать два разных периода для значений: значения, вычисленные во время компиляции, т.е. при переносе в CSS, и во время рендеринга, т.е. когда переносимый CSS применяется браузером. Вычисленное значение высоты контейнера - это то, что только может быть известно во время рендеринга.
Самым близким к CSS условием являются его селекторы. SASS имеет богатые условные селекторы, но, как и CSS, они не могут (и, вероятно, никогда не смогут) выбирать элементы на основе значений измерения времени рендеринга.
Когда вы думаете об этом, это имеет смысл. Например, если бы вы могли выбирать элементы, основываясь на том, что высота больше или меньше фиксированного значения, у вас может быть один селектор для элементов с высотой> 100px, который устанавливает высоту 90px, и один селектор для элементов с высотой <100px, который устанавливает высоту до 110px, что приводит к бесконечному логическому циклу. </p>
В вашем конкретном случае вы можете использовать селекторы, такие как :nth-child, для достижения результата, близкого к тому, что вы запрашиваете. Если вы знаете, что с двумя абзацами высота контейнера всегда будет меньше 100 пикселей, но с 3 абзацами высота контейнера всегда будет больше 100 пикселей, вы можете выбрать третий абзац, возможно, используя его ::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. Конечно, если ваши абзацы имеют переменную высоту, это решение может не сработать.