Using variables within style tag in Svelte

Показать описание

📝 Using variables within style tag in Svelte

- using CSS Custom Properties
- using Svelte actions

🔗 Want to learn more from me? Check out these links:

#svelte

lihautan

Рекомендации по теме

Комментарии

This is going to be so useful! I'm going to add this to my collection of helpers now.

JeffCaldwell-nemo_omen

Nice trick with the actions to automatically set the style variables!

PaulHobbs

At 0:04 useCssBariables is in a separate file. But after that you are using single file. 👍 Hope using action in other file can make it reusable action. Thanks for the tricky use of action 👍❤️❤️
... Compared to Vue, SVELTE looks more developer friendly 🔥🔥

SusanthCom

Good to know this trick.

Do you think Svelte will allow us to use JavaScript variables inside CSS style tags in the future?

maybepumpkins

Great video. I'm currently learning svelte and I'm trying to dynamically update body background colour using text from an input. Nothing seems to work. Thanks

Scipio-Nigerianus

Been banging my head on this issue, Li Hau, and could use your guidance.
I've got a store item/localVariable called heart. It's a boolean.

If heart is true, I want to add a class name "filled" to a div.
If untrue, add a class name "unfilled" to that save div.

My goal is that when a user comes to my site (or refreshes the page), Svelte will
fill in the proper class, depending on the state of that stored variable.

billpliske

Well, good to know... but this is so cumbersome it doesn't seem worth it in my case. I hope in the future Svelte can support JavaScript variables in its CSS, like it currently can for its HTML. Even if the underlying mechanism is the same - offloading that legwork to the framework would make this approach much more usable.

daviddrayton

Great video.

Can you make video about how svelte work under the hood more detail?? Thanks...

farhan_

Using variables within style tag in Svelte

Using variables within style tag in Svelte

CSS Variables in 100 Seconds

Can You Use Variables in the style Tag of a SvelteKit Component?

How to Incorporate Variables in Inline HTML Style Tags for Dynamic Web Design

Variables in CSS - Level Up variables with Propery

Tokens, variables, and styles - Update: Introduction to design systems

CSS Variables (Custom Properties) Tutorial

35: How to Create Variables in CSS | Create CSS Variables | Learn HTML and CSS | HTML Tutorial

MAD I AQ/PQ Session Week 4

Figma tutorial: Intro to variables

Using Variables with Component Properties | Figma

How to Easily Use Variables for Dynamic CSS Styles in JavaScript

Mastering Bricks Builder - CSS Variables

variables in css level up variables with propery

How to Pass Variables to inline style in Rails with .erb Syntax

Change Webpage Styles Easily with CSS Variables

Styling Web Components with Shadow DOM: CSS variables, parts, shared styles

How to Load Component Styles in Angular with SCSS Variables and Mixins

introducing variables in webflow

CSS Variables in Lightning Components

MASTER Figma Components in 10 Minutes (Everything You Need To Know)

CSS variables in React components

How to Use CSS Variables for Custom Margin Styles Effectively

1.5 Using Variables for the Title Tag