CSS Nesting Is Coming Soon! 🤯 How To Nest Selector Styles TODAY!! (2021)
🦸 Become A VS Code SuperHero Today: https://vsCodeHero.com
🧑🏾🤝🧑🏽 Join my Discord developer community: https://discord.gg/A9CnsVzzkZ
If you're not familiar with Sass or Less, these give you the ability to nest CSS selectors within selectors, allowing you to write more modular and maintainable stylesheets.
For a long time, a big reason to use Sass was that it has the ability to use variables. But now CSS has variables too.
Just like that, CSS will soon have selector nesting as well!
This feature is currently in draft and is not supported by browsers yet. But, in this video, I'll show you how you can use it today.
📚 Resources:
- W3C Draft: https://drafts.csswg.org/css-nesting-1/
- PostCSS Nesting Package: https://github.com/csstools/postcss-nesting
- Vite.js: https://vitejs.dev/
_____________________________________
💻 Visit CodingPhase and get unlimited access to programming courses plus 20% 0FF!!
https://www.codingphase.com/codestackr
🤖 Get FREE AI-powered code completions from Kite: https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=codestackr&utm_content=description-only
_____________________________________
🛠️ Tools I use:
🟠 codeSTACKr Theme: https://marketplace.visualstudio.com/items?itemName=codestackr.codestackr-theme
🟠 STACKr Code Font (Exclusive to my VS Code Course - https://vsCodeHero.com)
🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/items?itemName=codeSTACKr.superhero-extensions
_____________________________________
⏱️ Timestamps ⏱️
00:00 - Intro
00:34 - What is Nesting?
00:57 - The "&"
01:46 - @nest
02:22 - Conditional Rule Nesting (@media)
02:51 - How Can We Use This Today?
03:15 - Vite Set Up
03:59 - Cleanup & HTML / CSS
06:00 - PostCSS Configuration
07:07 - Let's Nest!
_____________________________________
💖 Show support!
PayPal: https://paypal.me/codeSTACKr
_____________________________________
👀 Watch Next:
Playlist: Web Development For Beginners - https://www.youtube.com/watch?v=Ez4yHS2dsN8&list=PLkwxH9e_vrAJ0WbEsFA9W3I1W-g_BTsbt
_____________________________________
🌐 Connect With Me:
Website: https://www.codestackr.com
Twitter: https://twitter.com/codeSTACKr
Instagram: https://instagram.com/codeSTACKr
Facebook: https://facebook.com/codeSTACKr
_____________________________________
** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.
#codeSTACKr #CSS #Vitejs
Видео CSS Nesting Is Coming Soon! 🤯 How To Nest Selector Styles TODAY!! (2021) канала codeSTACKr
🧑🏾🤝🧑🏽 Join my Discord developer community: https://discord.gg/A9CnsVzzkZ
If you're not familiar with Sass or Less, these give you the ability to nest CSS selectors within selectors, allowing you to write more modular and maintainable stylesheets.
For a long time, a big reason to use Sass was that it has the ability to use variables. But now CSS has variables too.
Just like that, CSS will soon have selector nesting as well!
This feature is currently in draft and is not supported by browsers yet. But, in this video, I'll show you how you can use it today.
📚 Resources:
- W3C Draft: https://drafts.csswg.org/css-nesting-1/
- PostCSS Nesting Package: https://github.com/csstools/postcss-nesting
- Vite.js: https://vitejs.dev/
_____________________________________
💻 Visit CodingPhase and get unlimited access to programming courses plus 20% 0FF!!
https://www.codingphase.com/codestackr
🤖 Get FREE AI-powered code completions from Kite: https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=codestackr&utm_content=description-only
_____________________________________
🛠️ Tools I use:
🟠 codeSTACKr Theme: https://marketplace.visualstudio.com/items?itemName=codestackr.codestackr-theme
🟠 STACKr Code Font (Exclusive to my VS Code Course - https://vsCodeHero.com)
🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/items?itemName=codeSTACKr.superhero-extensions
_____________________________________
⏱️ Timestamps ⏱️
00:00 - Intro
00:34 - What is Nesting?
00:57 - The "&"
01:46 - @nest
02:22 - Conditional Rule Nesting (@media)
02:51 - How Can We Use This Today?
03:15 - Vite Set Up
03:59 - Cleanup & HTML / CSS
06:00 - PostCSS Configuration
07:07 - Let's Nest!
_____________________________________
💖 Show support!
PayPal: https://paypal.me/codeSTACKr
_____________________________________
👀 Watch Next:
Playlist: Web Development For Beginners - https://www.youtube.com/watch?v=Ez4yHS2dsN8&list=PLkwxH9e_vrAJ0WbEsFA9W3I1W-g_BTsbt
_____________________________________
🌐 Connect With Me:
Website: https://www.codestackr.com
Twitter: https://twitter.com/codeSTACKr
Instagram: https://instagram.com/codeSTACKr
Facebook: https://facebook.com/codeSTACKr
_____________________________________
** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.
#codeSTACKr #CSS #Vitejs
Видео CSS Nesting Is Coming Soon! 🤯 How To Nest Selector Styles TODAY!! (2021) канала codeSTACKr
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![Learn how to power-up your CSS with PostCSS](https://i.ytimg.com/vi/ohJcZW60br0/default.jpg)
![10 CSS Pro Tips - Code this, NOT that!](https://i.ytimg.com/vi/Qhaz36TZG5Y/default.jpg)
![](https://i.ytimg.com/vi/QUi3V7Skz4k/default.jpg)
![Top 10 Best VS Code Extensions](https://i.ytimg.com/vi/c5GAS_PMXDs/default.jpg)
![How to learn to code (quickly and easily!)](https://i.ytimg.com/vi/R2pIutTspQA/default.jpg)
![Before and After pseudo elements explained - part one: how they work](https://i.ytimg.com/vi/zGiirUiWslI/default.jpg)
![HTML Crash Course In 30 Minutes](https://i.ytimg.com/vi/XiQ9rjaa2Ow/default.jpg)
![Learn CSS Specificity In 11 Minutes](https://i.ytimg.com/vi/CHyPGSpIhSs/default.jpg)
![5 CSS mistakes that I see way too often](https://i.ytimg.com/vi/iHEkRIF7zxI/default.jpg)
![Learn CSS Grid in 20 Minutes](https://i.ytimg.com/vi/0-DY8J_skZ0/default.jpg)
![Combining and Chaining CSS Selectors](https://i.ytimg.com/vi/6VGKD7p4p-w/default.jpg)
![Self Taught Programmers... Listen Up.](https://i.ytimg.com/vi/FrFY6Y1MJBQ/default.jpg)
![How you can simplify your CSS with :is()](https://i.ytimg.com/vi/McC4QkCvbaY/default.jpg)
![This is ALL you NEED to Become a Web Developer Today (2021)](https://i.ytimg.com/vi/LTwFX-hitQo/default.jpg)
![Use future CSS features in your code right now!](https://i.ytimg.com/vi/Ek1JP3BzbhY/default.jpg)
![Margin and Padding Deep Dive: Using whitespace to make our designs look better](https://i.ytimg.com/vi/TkdBtmwWyZo/default.jpg)
![Background images with HTML & CSS](https://i.ytimg.com/vi/zHZRFwWQt2w/default.jpg)
![Stop using @import with Sass | @use and @forward explained](https://i.ytimg.com/vi/CR-a8upNjJ0/default.jpg)
![A new way to write media queries is coming to CSS](https://i.ytimg.com/vi/BvB8kSmgMcM/default.jpg)
![Tailwind CSS Crash Course](https://i.ytimg.com/vi/UBOj6rqRUME/default.jpg)