.myBox {
line-height: 2; // this will be twice the value of the font-size
height: 6ems; // equivalent to 3 lines high
要在SASS中实现同样的功能,您可以编写:
$lineheight: 2; // this value can be unitless or a unit like ems, px or percentage
$numberoflines: 3;
.myBox {
line-height: $lineheight;
height: $lineheight * $numberoflines;
}
<div style="display: flex; border: 1px solid red">
<div>
<br>
<br>
<br>
</div>
<div>
This text will appear in a box that has a height of at least 3 lines.
</div>
</div>
2条答案
按热度按时间vi4fp9gy1#
我不确定我是否完全理解了这个问题,但你不能用相对单位吗?
例如,如果行高为2ems(或无单位),而您希望方框的总高度为3“行”高(大概不考虑填充),则可以将高度设置为6ems。这样,行高可以根据基本单位(字体大小)灵活调整,高度也可以使用相同的基本单位。
下面是一个例子:
要在SASS中实现同样的功能,您可以编写:
这将使您能够灵活地将变量移动到设置文件中,以便您(或其他人)可以轻松地更改值,而不必找到使用这些变量的所有选择器。
q3qa4bjr2#
下面是我使用的一个变通方法