css - 创建一个 div 正方形，并使用 less 将其相应地居中于视口(viewport)

Question

我想根据屏幕的大小在浏览器中创建一个正方形(或 div)，所以我使用百分比，我希望正方形是屏幕高度的 40%，并得到这个以像素为单位的百分比并将其用于宽度以获得正方形。并使用这些值将其居中。我知道使用 javascript 应该很容易，但我对 less 还是陌生的，我想知道如何做到这一点。我尝试了以下但不起作用:

@base:calc(40% * 1px);

#mytransform { 
   background-color:#ccc;
   height:@base;
   width:@base;
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-(@base/2);
   margin-left:-(@base/2);

 }

如何将百分比转换为像素？

Answer 1

你不能用预编译的 LESS 做你想做的事

LESS 是一个 CSS 预处理器。这意味着它会在浏览器看到它之前处理代码以将其形成 CSS；就 LESS 而言，浏览器并不存在。这意味着，浏览器窗口高度的 40% 对 LESS 来说完全未知。它所知道的只是 40%，不知道稍后实际转化为像素的是什么。

你要么坚持使用 javascript，要么 use extra html mark-up to get the squaring effect .

客户端编译(不推荐用于生产)

我需要强调的是，客户端编译只推荐用于开发。如果有人关闭了 javascript，那么他们将不会获得任何样式。那些打开它的人将经历页面加载速度的减慢。

现在，您收到无效类型错误的原因是因为返回值需要变成 LESS 可以理解的数字(我认为它将返回值视为字符串)。这可以像这样轻松完成(请参阅对 @base 赋值的更改):

@base: (0.4 * unit(`window.innerHeight`, px));

#mytransform { 
   background-color:#ccc;
   height:@base;
   width:@base;
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-(@base/2);
   margin-left:-(@base/2);
 }

我在 less2css.org 上一次运行的 CSS 输出

#mytransform {
  background-color: #ccc;
  height: 243.60000000000002px;
  width: 243.60000000000002px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -121.80000000000001px;
  margin-left: -121.80000000000001px;
}