Sass 如何使用@if in@函数检查SCSS中屏幕的方向？

我一直在尝试编写条件SCS，如果设备是横向的，则将设备高度设置为一个值；如果设备是纵向的，则将设备高度设置为另一个值

我知道我可以使用媒体查询来确定方向，但我认为我没有收到正确的计算结果。目前这就是我所拥有的。如何检查我的情况是否正确书写

@function calculateRootHeight ($width, $orientation: landscape)
{
  $heightPaddedRatio: 1.0;
  $heightToWidth: 2/3;
  @if (orientation: portrait) {
    $heightToWidth: 3/2;
  }
  @return $heightPaddedRatio * $heightToWidth * $width;
}

@mixin describeRoot($bodyWidth) {
  #root {
    background-color: #EAE5E5;
  }
  @media (orientation: portrait) {
    #root {
      height: calculateRootHeight($bodyWidth, portrait);
    }
  }
  @media (orientation: landscape) {
    #root {
      height: calculateRootHeight($bodyWidth, landscape);
    }
  }
}

---

我认为您只需要稍微更改@if语句中的语法，其余的似乎都可以

如果要检查Sass函数中的值，则使用@debug指令非常有用

@function calculateRootHeight ($width, $orientation: landscape) {
  $heightPaddedRatio: 1.0;
  $heightToWidth: 2/3;

  @if ($orientation == "portrait") {
    $heightToWidth: 3/2;
  }  

  @debug "Orientation is '#{$orientation}'";
  @return $heightPaddedRatio * $heightToWidth * $width;
}

.portrait {
  height: calculateRootHeight(200px, portrait); /* Orientation is 'portrait' */
}

.landscape {
  height: calculateRootHeight(200px); /* Orientation is 'landscape' */
}

---

现在，我正在开发React on Webstorm，使用文件监视程序自动预处理SCS。在哪里可以显示调试的输出？我可以在浏览器中以任何方式显示它吗？我从未尝试过Webstorm，但据我所知，键盘快捷键Alt+F12将显示控制台。希望您能在那里看到Sass调试输出。