在Sass中某些条件下向P标签元素添加边框

Question

Sass中是否可以声明高度是否超过40％，并添加1px的边框？

p {
    font-family: $regular-font;
    color: $color-neutral-50;
    margin-bottom: 14px;
    padding: 10px;
    border: 1px solid $color-border;
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
    position: relative;
    height: auto;
}

Answer 1

不，没有办法实现这一目标。您将必须有一个附加类，将最小高度设置为40％，然后执行某些操作。

如果您知道在特定的屏幕高度（或文本换行时为宽度）下，P元素将大于分配的屏幕空间的40％，则可以使用媒体查询来获取屏幕尺寸，并有条件地在P标签上设置样式。

@media (max-height: 850px){
   p {
      /* do something here */
   }
}

当然，还有另一种通过javascript做到这一点的方法，获取两个元素的高度并计算出P标签是否大于40％，然后根据该样式设置样式或类。

Answer 2

我认为您要查找的是元素查询。这些是受元素属性而不是视口影响的媒体查询。这不是CSS的功能，但是有一些库和预处理器可以实现此目的。

https://github.com/marcj/css-element-queries

希望这会在某个时候添加。该规范仍在开发中： Element Queries specification

否则，您可以使用javascript来实现。