获取SASS中的设备大小

我想获得SASS中的设备宽度和高度。因为我想创建函数为像素转换vw/vh为ncompatible平台。获取SASS中的设备大小

我已经写在不到

@w_device:`$(window).width()/100`; 
@h_device:`$(window).height()/100`; 

.vh(@v){ 
    @val:round(@h_device*@v*1px); 
} 
.vw(@v){ 
    @val:round(@w_device*@v*1px); 
}

任何人这个功能有一个想法如何做到这一点的SASS？

谢谢

来源

2015-08-14 Meco

你上面写的东西需要在浏览器中编译LESS。换句话说，使用Less.js。这只适用于开发而不适用于生产。目前，SASS没有与Less.js相当的功能（请参阅http://stackoverflow.com/questions/4436643/is-there-a-sass-js-something-like-less-js）。 SASS *必须*预先编译。 SASS没有办法知道'$（window）.width（）'，因为编译时没有'window'。 – nabrown78

感谢您的回复，我怀疑这样的事情。是否有另一种方式来重新创建V单位的行为？ – Meco

除了使用百分比设置'width'或'height'，没有。幸运的是，vw和vh具有相当不错的支持：http：//caniuse.com/#feat=viewport-units，尽管vmin和vmax不如此。 – nabrown78

我认为这是非常接近你所问的。

@function get-vw($target) { 
    $vw-context: (1000*.01) * 1px; 
    @return ($target/$vw-context) * 1vw; 
}

用法：

h1 { 
    font-size: get-vw(72px); 
}

由于vw是视口的1％，我们可以作为一个比在px缩放大小。返回值可以用于其他元素。 IE：图像，背景等

这是一个great article讨论几种萨斯方法。

来源

2017-10-03 03:28:32 matthew

获取SASS中的设备大小

回答

相关问题