Именованные линии сетки CSS с SCSS

Я экспериментирую с новой системой CSS Grid Layout в codepen.io. Он имеет интересную функцию под названием названные строки сетки, которая позволяет определять пользовательские имена для линий сетки между столбцами и строками. К сожалению, я не могу заставить эту функцию работать, потому что SCSS не одобряет синтаксис [line-name].

#container.named {
  grid-template-columns: [main-start] 100px [content-start] 1fr [content-end] 100px [main-end]; // Will not pass SCSS validation :(

  .one {
    grid-column: content-start / content-end;
  }
}

В приведенном выше коде должна быть создана сетка CSS с двумя столбцами шириной 100 пикселей по бокам с колонкой, заполняющей остальную ширину элемента в центре. Эта часть работает нормально. Затем я пытаюсь дать пользовательские имена линий сетки и поместить элемент .one в средний столбец, но препроцессор Codepen SCSS (как и все другие компиляторы, которые я пробовал) отказывается компилировать все это, говоря Invalid CSS after "...plate-columns: ": expected expression (e.g. 1px, bold), was "[main-start] 10..."

Есть ли способ заставить SCSS скомпилировать этот стиль как есть - без его разбора (или выразить это другим способом, который компилирует), или мне придется переписать мой эксперимент с помощью обычного CSS?

Ответы

Ответ 1

Попробуйте поместить всю строку CSS в строку:

$gridTplCols: "[main-start] 100px [content-start] 1fr [content-end] 100px [main-end]";

grid-template-columns: #{$gridTplCols};