Вопрос или проблема
Из коробки Visual Studio 2022, похоже, не поддерживает вложенность CSS в обычных .css файлах.
Вложение таких объявлений, как:
.selector {
.child-selector {
}
}
Вызывает предупреждения интellisense и нарушает форматирование.
Конечно, это поддерживаемый синтаксис во всех основных браузерах.
Есть ли что-то, что я могу сделать, чтобы включить эту поддержку? Может быть, существует расширение для этого?
Я не думаю, что это было задумано работать таким образом, даже если это и работает. Попробуйте старый способ определить стиль для класса, если это дочерний класс другого класса, что-то вроде этого:
.selector {
position: absolute;
bottom: 0;
z-index: 1;
}
.selector .child-selector {
display: inline-flex;
position: relative;
height: 100%;
}
.selector .child-selector img {
object-fit: contain;
height: 100%;
width: auto;
}
И они будут работать безупречно, доверьтесь мне.
Под капотом .selector и .child-selector – это классы. Даже в HTML вы задаете стиль CSS с помощью ключевого слова class, например, <element class="class-name">, а в программировании избегают определения классов внутри других классов из-за возможной утечки памяти. Вы используете VS, который был создан в основном для ООП, даже если он поддерживает и скрипты (такие как CSS). Если вам это не нравится, попробуйте использовать другую IDE, например, Atom или WebStorm?
Ответ или решение
Поддержка вложенности CSS в Visual Studio 2022
Согласно предоставленной информации, Visual Studio 2022 по умолчанию не поддерживает вложенность CSS в обычных .css файлах. Когда вы пытаетесь использовать такую практику, как:
.selector {
.child-selector {
}
}это вызывает предупреждения в Intellisense и нарушает форматирование. Таким образом, возникает вопрос: как же обойти это ограничение и включить поддержку вложенности CSS?
Причины отсутствия поддержки
На данный момент, стандартные CSS-файлы (.css) в Visual Studio не поддерживают вложенность, поскольку это часть более продвинутых возможностей, которые доступны, например, в предпроцессорах CSS, таких как SASS или LESS. Вложенность действительно является новым стандартом в CSS, который поддерживают современные браузеры (согласно caniuse.com), но IDE не всегда соответствуют этому.
Возможные решения
-
Использование CSS-предпроцессоров: Одним из самых простых решений является переход к SASS или LESS. Эти инструменты поддерживают вложенность и могут быть интегрированы в ваши проекты. Вот как это можно сделать:
-
Установка SASS: Вы можете установить SASS через NPM:
npm install -g sass -
Изменение расширений файлов: Переименуйте ваши файлa с .css на .scss (для SASS) или .less (для LESS). Затем вы сможете использовать вложенность и другие возможности предпроцессоров, такие как переменные и функции.
-
Компиляция: Не забудьте настроить систему сборки (например, Gulp или Webpack) для компиляции SASS/LESS в обычные CSS, которые будут использованы в вашем проекте.
-
-
Расширения для Visual Studio: Возможно, существуют расширения, которые улучшают поддержку CSS. Однако, на момент написания этого ответа, официальных плагинов от Microsoft для работы с вложенной нотацией в CSS нет. Рекомендуется следить за новыми обновлениями Visual Studio и проверять Marketplace на наличие новых инструментов.
-
Использование других редакторов: Вы упоминаете возможность использования других IDE, таких как Atom или WebStorm. Если вам необходимы функции, которые поддерживают вложенность, стоит рассмотреть взаимодействие с этими инструментами. WebStorm, например, отлично поддерживает работу с CSS, SASS и другими языками стилей.
Альтернативный подход
Если вы предпочитаете не использовать предпроцессоры, вы можете продолжать использовать более традиционный подход, сохраняя постулаты о написании CSS. Например, вместо вложенности вы можете четко определить стили отдельных селекторов:
.selector {
position: absolute;
bottom: 0;
z-index: 1;
}
.selector .child-selector {
display: inline-flex;
position: relative;
height: 100%;
}
.selector .child-selector img {
object-fit: contain;
height: 100%;
width: auto;
}Таким образом, вы получите понятный и обслуживаемый код, без осложнений, связанных с вложенной нотацией.
Заключение
Поддержка CSS-вложенности в Visual Studio 2022 требует некоторых обходных путей, таких как использование предпроцессоров или альтернативных редакторов. Выбор правильного подхода зависит от ваших нужд и предпочтений в разработке. Важно помнить, что спецификация CSS продолжает развиваться, и в будущем может появиться поддержка этих возможностей непосредственно в средах разработки, таких как Visual Studio.