Utility Classes as Properties Pattern (Svelte)

Box.svelte

<script>
  export let top = true;
  export let bottom = true;
  export let right = true;
  export let left = true;
</script>

<div class:top class:bottom class:left class:right>
  <slot/>
</div>

<style type="scss">
  $y-padding: 20px;
  $x-padding: 10px;
  
  .top {
    padding-top: $y-padding;
  }
  .bottom {
    padding-bottom: $y-padding;
  }
  .left {
    padding-left: $x-padding;
  }
  .right {
    padding-right: $x-padding;
  }
</style

index.svelte

<script>
  import Box from "./Box.svelte";
  const section2 = {
    top: false,
    left: false,
  }
</script>

<Section bottom={false}>One</Section>
<Section {...section2}>Two</Section>