html - 将单位添加到数字

Question

我尝试创建一个 LESS 类用于旋转视口(viewport)的元素:

.vertical-display (@x:vw,@y:vh) {
    .video-container {
        width: 100@x;
        height: 80@y;
        padding: 1@y;

        video {
            max-height: 75@y;
        }
    }

当我用 less 渲染它时，我得到的间隔属性如下: 宽度:100 vw;

我怎样才能用更少的资源摆脱这个空间？

Answer 1

.vertical-display (@x:vw,@y:vh) {
  .video-container {
    width: unit(100, @x);
    height: unit(80, @y);
    padding: unit(1, @y);

    video {
      max-height: unit(75, @y);
    }
  }
}

将按照您的意愿输出，但是如果您想以百分比作为单位传递，则必须将其作为转义字符串传递 .vertical-display(~'%', ~'%'); 。