Я экспериментирую с новой системой 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?
