mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
19 lines
810 B
19 lines
810 B
2 years ago
|
---
|
||
|
|
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:
|
||
|
|
|
||
1 year ago
|
```svelte
|
||
|
|
<p
|
||
|
|
style:color
|
||
|
2 years ago
|
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.
|