Использование переменных sass в сетке css

Question

Я пытаюсь настроить макет страницы с сеткой css. Я использую s css. Когда я хочу использовать в качестве css переменную для 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-width SASS выполняет вычисление 4rem/4rem и возвращает 1, что делает недействительным ваше свойство grid-template.

Вы можете использовать интерполяция на одну или обе эти переменные, чтобы избежать этой проблемы:

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