The Ideal Example

So below is how, in an ideal world, I would write SCSS:

.block {
  &__element {
    &:hover {
      ...
    }

    @media screen and (min-width: 768px) {
      ...
    }

    &--modifier {
      &:hover {
        ...
      }

      @media screen and (min-width: 768px) {
        ...
      }
    }
  }

  &__element-sibling {
    ...
  }
}

Writing SCSS with BEM - Joe Forshaw