Question

问题说明了一切。是否可以使用SCSS将元素的margin-top设置为另一个元素高度的60％？

我正在开发一款针对浏览器，Android，iOS和Windows Phone的Ionic 2应用。以下是要素：

  <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实现吗？

Answer 1

我不确定这是答案，但无论如何

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的“糖”

Answer 2

您需要记住scss输出到有效的CSS。它没有向前端添加任何新内容，它只是（希望）简化了后端（例如通过添加意味着您不必自己进行计算和值转换的功能）。

所以问题确实变成了“你能在CSS中做到这一点吗。”

正如ddeadlink所指出的，如果徽标元素的高度是固定的（或者您可以调整设计以使其固定），那么您可以将高度设置为变量并使用scss计算60％的高度。如果没有，那么您将继续使用JS进行更新。

是否可以使用SCSS将元素的margin-top设置为另一个元素高度的60％？

2 个答案: