CSS custom properties (variables) in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are CSS custom properties (variables)?

CSS custom properties are special values defined by the user that start with --. They store reusable values like colors or sizes, making it easy to change styles in one place.

beginner

How do you define a CSS custom property inside a Svelte component?

You define it inside a CSS selector using --property-name: value;. For example, :root { --main-color: #3498db; } sets a global variable.

beginner

How do you use a CSS custom property in your styles?

Use the var(--property-name) function. For example, color: var(--main-color); applies the value stored in --main-color.

intermediate

Why are CSS custom properties useful in Svelte components?

They let you create flexible styles that can be changed easily. You can update variables dynamically or share them across components for consistent design.

intermediate

Can CSS custom properties be changed with JavaScript in Svelte?

Yes! You can update them by setting styles on elements or document.documentElement. This allows dynamic theming or style changes without rewriting CSS.

How do you declare a CSS custom property?

A Using <code>@property-name: value;</code>

B Using <code>$property-name: value;</code>

C Using <code>property-name: value;</code>

D Using <code>--property-name: value;</code>

CSS custom properties always start with two dashes --.

How do you use a CSS custom property in a style rule?

A color: $property-name;

B color: var(--property-name);

C color: @property-name;

D color: property-name;

Use the var(--property-name) function to access the value.

Where can you define global CSS custom properties in a Svelte app?

A :root selector

B Inside <script> tag

C Inside <style> tag without selector

D Inside <main> tag

The :root selector defines variables globally.

Can CSS custom properties be changed dynamically with JavaScript?

A Only with Svelte stores

B No, they are fixed in CSS

C Yes, by setting style properties on elements

D Only in external CSS files

You can update CSS variables dynamically by changing element styles.

What is a benefit of using CSS custom properties in Svelte?

A Easier theming and style reuse

B Faster JavaScript execution

C Automatic component re-rendering

D Built-in state management

CSS variables help keep styles consistent and easy to update.

Explain how to define and use CSS custom properties in a Svelte component.

Think about how you set colors or sizes once and reuse them.

Describe how CSS custom properties can be updated dynamically in a Svelte app.

Consider how you might let users switch color themes.