class属性の省略記法

変数activeがtrueの場合にactiveというクラス名をつけたい場合は以下のように書きます。

<button class={active ? 'active' : ''}>送信する</button>

上記のコードは以下のように省略できます。

<button class:active={active}>送信する</button>

変数名とクラス名が同じ場合はさらに省略が可能です。

<button class:active>送信する</button>

複数のクラス名に対して使用しても問題ありません。

<button class="mail" class:blue={theme === 'blue'} class:disabled>送信する</button>

style属性の省略記法

style属性はHTMLと同様に使用できます。

<p style="color: red;">Hello Svelte!</p>

上記のコードは以下のように省略できます。

<p style:color="red">Hello Svelte!</p>

値は変数で指定することもできます。

<p style:color={color}>Hello Svelte!</p>

変数名とプロパティ名が同一の場合は以下のように省略できます。

<p style:color>Hello Svelte!</p>

複数のプロパティ名に使用できます。

<p style="font-size: 16px" style:color style:background={theme === 'blue' ? 'blue' : 'black'}>Hello Svelte!</p>

まとめ

記法がたくさんあり、すぐに忘れてしまいそうだったので覚え書きです。

参考書籍：『実践Svelte入門』