Css 较少的返回值

我正试着做一个不太像上面描述的那样的

mixin

我采用jQuery窗口大小：

@winheight:`$(window).height()`;
@winwidth:`$(window).width()`;

计算百分比：（硬百分比在某些元素上不起作用）

通过本机CSS检测方向：

@portrait: ~"screen and (orientation:portrait)";

@landscape: ~"screen and (orientation:landscape)";

然后将其应用于元素：

.main {
   position: relative;
   margin:auto;
   background: gray;
   margin-top: 50px;

@media @portrait {
   .winwidth(50);
   width: @perc;

   .winheight(70);
   height: @perc;
   }    
@media @landscape {
   .winwidth(70);
   width: @perc;

   .winheight(50);
   height: @perc;
   }
}

但只有当我这样分割它们时，它才会返回正确的

@perc

（而不是上面的重复，因此高度和宽度将具有相同的值，这不是我想要的）：

---

是否有更好的/其他方法以更少的时间返回值？

这听起来像这样（除了中的答案）：因为您使用“函数”只设置

宽度
和
高度
属性（而不仅仅是任意属性），所以通过“普通”这样做是有意义的改为mixin，并在mixin中设置属性值，而不包含任何“返回值”，例如
.winheight（@percentage）{height:（@winheight/100）*@percentage）*1px！important}
。
.main {
   position: relative;
   margin:auto;
   background: gray;
   margin-top: 50px;

@media @portrait {
   .winwidth(50);
   width: @perc;

   .winheight(70);
   height: @perc;
   }    
@media @landscape {
   .winwidth(70);
   width: @perc;

   .winheight(50);
   height: @perc;
   }
}

@media @portrait {
   .winwidth(70);
   width: @perc;
}
@media @portrait {
   .winheight(50);
   height: @perc;
}   
@media @landscape {
   .winwidth(70);
   width: @perc;
}
@media @landscape {
  .winheight(50);
   height: @perc;
}