Often, the name of the class will be the same as the name of the value it depends on:
<div class:big={big}>
<!-- ... -->
</div>
In those cases we can use a shorthand form:
<div class:big>
<!-- ... -->
</div>
App.svelte
xxxxxxxxxx
18
1
<script>
2
let big = false;
3
</script>
4
5
<style>
6
.big {
7
font-size: 4em;
8
}
9
</style>
10
11
<label>
12
<input type=checkbox bind:checked={big}>
13
big
14
</label>
15
16
<div class:big={big}>
17
some {big ? 'big' : 'small'} text
18
</div>
Console
xxxxxxxxxx
103
1
/* App.svelte generated by Svelte v3.23.2 */
2
import {
3
SvelteComponent,
4
append,
5
attr,
6
detach,
7
element,
8
init,
9
insert,
10
listen,
11
noop,
12
safe_not_equal,
13
set_data,
14
space,
15
text,
16
toggle_class
Compiler options
result = svelte.compile(source, {
generate:
});xxxxxxxxxx
1
1
.big.svelte-crddqb{font-size:4em}