我正在尝试使用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;
}
}
当使用保存完全相同值的变量时,为什么布局会出现问题?此外,所有其他变量都可以正常工作。
这是代码,您可以插入变量并查看其断开。