awesome-styled-component.vue

<template>
  <div :class="classes">
    <img class="awesome__logo" src="@/assets/logo.png">

    <h2 class="awesome__heading">Awesome</h2>
  </div>
</template>

<script>
export default {
  name: 'Awesome',
  props: {
    dark: {
      type: Boolean,
      default: false
    },

    raised: {
      type: Boolean,
      default: false
    }
  },

  computed: {
    classes() {
      const klass = 'awesome'
      let classes = klass

      if (this.dark) {
        classes += ` ${klass}--dark`
      }

      if (this.raised) {
        classes = ` ${klass}--raised`
      }

      return classes
    }
  }
}
</script>

<style lang="sass" scoped>
.awesome
  background: white

  &__logo
    max-width: 10em
  
  &__heading
    font-weight: 400

  // Describe modifiers/theme
  &--dark
    background: #444

    // For dark them we want our
    // heading to have white color
    .awesome
      &__heading
        color: #fff

  &--raised
    box-shadow: 0.5em 0.5em 0.2em #eee
</style>