awesome-css-only-class-attribute.vue

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

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

<script>
export default {
  name: 'Awesome'
}
</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>