是否可以用SCSS将一个元素的边缘顶部设置为另一个元素高度的60%？
是否可以用SCSS将一个元素的边缘顶部设置为另一个元素高度的60%？
提问于 2017-04-07 08:41:15
问题说明了一切。是否可以用SCSS将一个元素的边缘顶部设置为另一个元素高度的60%？
我正在开发一个Ionic 2应用程序，目标是浏览器、安卓、iOS和Windows。以下是这些要素：
<div class='logoBox'>
<img src="assets/img/-.png" class="corner-logo" alt="-" />
<img src="assets/img/icon.png" class="logo" id="logo" alt="-" />
</div>
<div class='headerBox' id="headerBox">...</div>我现在的定位是这样的：
ionViewDidEnter(){
document.getElementById('headerBox').style.marginTop = Math.round(Number(document.getElementById('logo')['height']) * 0.6) + 'px';
window.addEventListener('orientationchange', () => {
document.getElementById('headerBox').style.marginTop = Math.round(Number(document.getElementById('logo')['height']) * 0.6) + 'px';
});
}我当前的方法在浏览器中工作，但是当以应用程序的形式在实际设备上运行时，“orientationchange”事件侦听器有时只会触发，从可视化结果中可以看出这一点。
那么，是否有可能在SCSS中实现同样的功能，使其在任何地方都能工作呢？如果没有，我能用JS实现它吗？
回答 2
Stack Overflow用户
发布于 2017-04-07 10:31:12
我不确定这是否是一个答案，但无论如何
SCSS
$marginVar = 200px // for example
.element-with-height{
margin-top: $marginVar ;
}
// if those elements that you want to affect is not nested inside `.element-with-height`
.affected-elements{
height: $marginVar * 60 / 100 // so you get 60% as from the question
}因此，实际上您只是使用variables作为scss的“糖”。
Stack Overflow用户
发布于 2017-04-07 10:26:25
您需要记住scss输出到有效的CSS。它没有为前端添加任何新内容，它只是(希望)简化后端(例如，通过添加意味着不必自己进行计算和值转换的特性)。
所以问题是“你能用CSS做这个吗”。
如前所述，如果徽标元素的高度是固定的(或者可以调整设计使其固定)，则可以将高度设置为变量，并使用scss计算其中的60%。如果没有，那么您将继续使用JS进行更新。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43273552
复制相关文章
相似问题
腾讯云开发者
