You're reading from Real-World Svelte Supercharge your apps with Svelte 4 by mastering advanced web development concepts

Product type Paperback

Published in Dec 2023

Publisher Packt

ISBN-13 9781804616031

Length 282 pages

Edition 1st Edition

Languages

JavaScript

Tools

Svelte.js

Concepts

Front End Web Development

Author (1):

Hau

Preface

1. Part 1: Writing Svelte Components

2. Chapter 1: Lifecycles in Svelte FREE CHAPTER

3. Chapter 2: Implementing Styling and Theming

4. Chapter 3: Managing Props and State

5. Chapter 4: Composing Components

6. Part 2: Actions

7. Chapter 5: Custom Events with Actions

8. Chapter 6: Integrating Libraries with Actions

9. Chapter 7: Progressive Enhancement with Actions

10. Part 3: Context and Stores

11. Chapter 8: Context versus Stores

12. Chapter 9: Implementing Custom Stores

13. Chapter 10: State Management with Svelte Stores

14. Chapter 11: Renderless Components

15. Chapter 12: Stores and Animations

16. Part 4: Transitions

17. Chapter 13: Using Transitions

18. Chapter 14: Exploring Custom Transitions

19. Chapter 15: Accessibility with Transitions

20. Index

21. Other Books You May Enjoy

Theming Svelte components with CSS custom properties

Let’s take a quick knowledge check on CSS custom properties:

You define CSS custom properties like any other CSS properties, except that the name of the CSS custom property starts with two dashes:
```
--text-color: blue;
```
To reference the CSS custom property, use the var() function:
```
color: var(--text-color);
```
CSS custom properties cascade like any other CSS properties:
```
.foo {
  --text-color: blue;
}
div {
  --text-color: red;
}
```
The value of the --text-color CSS custom property for <div> elements is red, except for the <div> elements with a class named foo.
The value of CSS custom properties is inherited from their parent:
```
<div>
  <span />
</div>
```
If the value of --text-color for <div> in the preceding example is red, then without other CSS rules applied to <span>, the value of --text-color for <span> is also red.