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

【问题标题】：Is it possible to set an element's margin-top as 60% of another element's height with SCSS?是否可以使用 SCSS 将元素的 margin-top 设置为另一个元素高度的 60%？
【发布时间】：2017-09-02 13:38:43
【问题描述】：

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

我正在开发一个 Ionic 2 应用程序，目标是浏览器、Android、iOS 和 Windows Phone。以下是元素：

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

【问题讨论】：

您是否尝试将这些元素高度放入变量中？然后只需使用$thoseVariableHeight*60/ 100 转换您需要的那些元素边距？
我是 SCSS 菜鸟，所以对此一无所知。必须尝试一下。

标签： javascript css angular sass ionic2

【解决方案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 中的“糖”

【讨论】：

【解决方案2】：

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

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

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

【讨论】：