Video Belajar
Tonton dan pelajari berbagai topik menarik melalui video pembelajaran eksklusif dari Channel lihautan.
lihautan
3970
Svelte Tutorial for Beginners - Style your Svelte component [1/3]
Let's add some styles to your Svelte component.
Styles are scoped in Svelte, meaning, all the selectors will only apply to the elements within the Svelte component.
This means
1) You don't have to worry adding a style will break the style of elements outside of this component
2) Svelte will warn you if your selector does not match any elements within this component
Also, @keyframes animations are scoped too!
Of course there's always a way to disable the scoped style behaviour if you choose not to scope your selector or @keyframes.
Introduction 00:00
How styles are scoped 00:54
Svelte warns for unused selectors 03:38
How scoped styles work 04:32
Scoped @keyframes 06:59
Disable scoped style behaviour 09:16
---
💻 REPL https://svelte.dev/repl/467770b8117d4af9ac7cfc7622f36526?version=3.35.0
🎧 Svelte Tutorial for Beginners https://www.youtube.com/playlist?list=PLoKaNN3BjQX3mxDEVG3oGJx2ByXnue_gR
📚 Related Resources
Svelte https://svelte.dev
Svelte REPL https://svelte.dev/repl
Svelte Tutorial https://svelte.dev/tutorial/styling
🥰 Support me https://www.buymeacoffee.com/lihautan
🔗 Want to learn more from me? Check out these links:
Twitter: https://twitter.com/lihautan
Blog: https://lihautan.com/
Newsletter: https://lihautan.com/newsletter
#svelte #sveltetutorial #sveltebeginner
Thanks for watching 🥰 -- with love, Li Hau
Styles are scoped in Svelte, meaning, all the selectors will only apply to the elements within the Svelte component.
This means
1) You don't have to worry adding a style will break the style of elements outside of this component
2) Svelte will warn you if your selector does not match any elements within this component
Also, @keyframes animations are scoped too!
Of course there's always a way to disable the scoped style behaviour if you choose not to scope your selector or @keyframes.
Introduction 00:00
How styles are scoped 00:54
Svelte warns for unused selectors 03:38
How scoped styles work 04:32
Scoped @keyframes 06:59
Disable scoped style behaviour 09:16
---
💻 REPL https://svelte.dev/repl/467770b8117d4af9ac7cfc7622f36526?version=3.35.0
🎧 Svelte Tutorial for Beginners https://www.youtube.com/playlist?list=PLoKaNN3BjQX3mxDEVG3oGJx2ByXnue_gR
📚 Related Resources
Svelte https://svelte.dev
Svelte REPL https://svelte.dev/repl
Svelte Tutorial https://svelte.dev/tutorial/styling
🥰 Support me https://www.buymeacoffee.com/lihautan
🔗 Want to learn more from me? Check out these links:
Twitter: https://twitter.com/lihautan
Blog: https://lihautan.com/
Newsletter: https://lihautan.com/newsletter
#svelte #sveltetutorial #sveltebeginner
Thanks for watching 🥰 -- with love, Li Hau