在CSS Grid模板中使用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

- The Fool

Answer 1

您的布局出现问题，因为在编写$content-foot-height / $page-sidebar-width时，SASS进行计算4rem/4rem并返回1，这使得grid-template属性无效。

您可以在其中一个或两个变量上使用插值(interpolation)来避免此问题：

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

- Arkellys