Кое-что о нативной вложенности CSS
Это интересная функция для браузеров, и вскоре мы сможем использовать вложенный синтаксис в CSS, что позволит нам писать более красивый, чистый и простой в обслуживании код.
Что такое вложение CSS?
Как фронтенд-разработчик, я уверен, что вы знакомы с этим кодом CSS.
<div class="box"> <p>hello medium</p> <div>hello fatfish</div> </div> .box{ background-color: rgba(0, 0, 0, 0.3); } .box p{ color: green; } .box div{ color: red; }
Да, вы должны были написать SCSS или более раннюю версию, что может упростить эту задачу.
.box{ background-color: rgba(0, 0, 0, 0.3); p{ color: green; } div{ color: red; } }
Благодаря вложенности CSS мы можем писать модульный и более удобный код CSS.
2. Как вкладывать селекторы в CSS
Я никогда не думал, что когда-нибудь смогу писать вложенный код прямо в CSS. Как должен быть написан приведенный выше пример?
.box{ background-color: rgba(0, 0, 0, 0.1); & p{ color: green; } & div{ color: red; } }
Да, нам нужно использовать только &
для вложенности!
3. Как использовать функцию вложения CSS в браузере Chrome
Функция вложения CSS все еще находится на экспериментальной стадии. Если вы хотите, чтобы приведенный выше код работал, вам необходимо выполнить следующие два шага.
- Введите
chrome://flags/
в адресной строке браузера Chrome. - 2. Найдите
Experimental Web Platform features
и установите для него значение «Включено».
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.