Atom не распознает команды CSS сетки "justify-items" и "justify-self". Зачем?

По какой-то странной причине атом не распознает justify-items а также justify-self команды, используемые в сетках CSS. Кто-нибудь знает, почему это так, и есть ли решение для этого?

.container {
  display: grid;
  grid-template-columns: [page-start] 1fr [content-start] 80vw [content-end] 1fr [page-end];
  grid-template-rows:
    [header] 5vh [home] 50vh [about] 5em [empty-start-one] 50vh
    [empty-end-one] 5em [services] 50vh [portfolio] 50vh [contact] 5em
    [empty-start-two] 30vh [footer] 10vh [footer-end];
}


<div class="container">
  <div class="box header">
</div>
Источник

2 ответа

Решение

Код, который вы разместили в вопросе, выглядит неправильно.

justify-items относится к сетке контейнера. Выравнивает дочерние элементы контейнера. По сути, он устанавливает по умолчанию justify-self значение для всех предметов.

У тебя есть justify-items применяется к элементу сетки (.header).

Поэтому, если элемент не является также контейнером сетки, justify-items не будет иметь никакого эффекта.

justify-self применяется к элементам сетки. Это позволяет отдельным элементам переопределять значение justify-items устанавливается контейнером.

Согласно спецификации сетки, justify-self: start является действительным правилом применительно к элементу сетки.

Источник

Это файл Less?

Эта подсветка контролируется языковым плагином для текущего языка распознаваемого языка. Текущие версии language-css а также language-postcss поддерживать эти свойства, поэтому они должны предоставлять правильные хуки для вашей темы подсветки синтаксиса для их правильного цвета. Тем не менее, я заметил language-less Пакет не поддерживает их.

Обычно вы можете видеть, на каком языке установлен текущий файл, на панели инструментов в нижней части экрана. Он отображается в правом нижнем углу рядом с кодировкой символов файла.

Источник
Другие вопросы по тегам