Skip to main content

Part 3 / Classes / Shorthand class directive

Often, the name of the class will be the same as the name of the value it depends on:

App.svelte
<div class:big={big}>
	<!-- ... -->
</div>

In those cases we can use a shorthand form:

App.svelte
<div class:big>
	<!-- ... -->
</div>

Next: Component composition

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
	let big = false;
</script>
 
<label>
	<input type="checkbox" bind:checked={big} />
	big
</label>
 
<div class:big={big}>
	some {big ? 'big' : 'small'} text
</div>
 
<style>
	.big {
		font-size: 4em;
	}
</style>
initialising