When writing selectors which are using BEM, you MUST use the syntax provided in Sass 3.3

[BenjaminRCooper]

Sass 3.3 introduced a new construct which allowed you to suffix selectors and next your modifiers and elements within your Block.

Example:

.block { 

        &--modifier {
            width: 50%;

            &__element {
                color: red;
            }

        }

}

Note - When using this approach, it is recommended that add a comment above your modifiers and elements which contains the full class name for that specific item. This allows developers to do a find and replace on the class name

Resources:

Writing modular CSS (BEM/OOCSS) selectors with Sass 3.3

[matchboxhero]

+1

Comments Example;

.block { 

       //.block--modifier

        &--modifier {
            width: 50%;

            //.block--modifier__element

            &__element {
                color: red;
            }

        }

        //.block__element

        &__element {
            color:black;
        }

}

[lewismorris]

+1

[BenjaminRCooper]

Just updated the code to add spacing after each comment for readability purposes. Will add and close off once implemented

[BenjaminRCooper]

Implemented and closed.