在css网格模板中使用sass变量

Question

我正在尝试设置一个css网格的页面布局。我正在使用scss。当我想使用grid-template的scss变量时，布局中断。

$page-header-height: 3rem;
$content-header-height: 6rem;
$content-menu-width: 10rem;

// if i try to use these, the layout breaks
$content-foot-height: 4rem;
$page-sidebar-width: 4rem;

body {
  height: 100vh;
  display: grid;
   grid-template:
    'sidebar header header' $page-header-height
    'sidebar menu mainHead' $content-header-height
    'sidebar menu main' 1fr
    // here should be foot height  / sidebar width     
    'sidebar menu mainFoot' 4rem / 4rem $content-menu-width; // < problem
  > * {
    border: thin groove gray;
  }
}

为什么在使用变量时布局会中断，这些变量保存着完全相同的值？最重要的是，所有其他变量都有效。

这是代码，你可以插入变量并看到它崩溃。

https://codepen.io/bluebrown/pen/NWqBYvq

Answer 1

您的布局会中断，因为编写$content-foot-height / $page-sidebar-width时SASS正在执行计算4rem/4rem并返回1，这会使您的grid-template属性无效。

您可以对这些变量中的一个或两个使用interpolation来避免此问题：

#{$content-foot-height} / #{$page-sidebar-width} $content-menu-width;