Scss: Multiple BEM states class

Question

I'm using Scss for my current project with BEM state conventions.

What i need:

CSS

.name {
    font-size: 10px;
}
.name--is-focus {
    font-size: 12px;
}
.name--is-active {
    font-size: 14px;
}
.name--is-focus.name--is-active {
    font-size: 16px;
}

SCSS

.name {
    font-size: 10px;

    &--is-focus {
        font-size: 12px;
    }

    &--is-active {
        font-size: 14px;
        &.name--is-focus {
            font-size: 16px;
        }
    }

}

The code works great. However, is this the right way for situation like this? I think there should be a more elegant way to do instead of this.

&--is-active {
    font-size: 14px;
    &.name--is-focus {
        font-size: 16px;
    }
}