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

Question

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

$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-widthSASS 时正在执行计算4rem/4rem并返回1，这会使您的grid-template属性无效。

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

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