mirror of https://github.com/sveltejs/svelte
810 B
810 B
| title |
|---|
| The style directive |
Being able to set CSS properties dynamically is nice. However, this can get unwieldy if you have to write a long string. Mistakes like missing any of the semicolons could make the whole string invalid. Therefore, Svelte provides a nicer way to write inline styles with the style directive.
Change the style attribute of the paragraph to the following:
<p
style:color
style:--opacity="{bgOpacity}"
>
The style directive shares a few qualities with the class directive. You can use a shorthand when the name of the property and the variable are the same. So style:color="{color}" can be written as just style:color.
Similar to the class directive, the style directive will take precedence if you try to set the same property through a style attribute.