BEM object definition using mixins - Auto-generated selector names with configurable syntax style. - Enables nesting without actually generating over-specific selectors (>=Sass 3.3). - Generates ids, classes or silent (placeholder) classes. Can be configured per object. - More robust definition, less error-prone. possible future extensions. Over…

bem-mixins.scss

$element-separator: '__';
$modifier-separator: '--';
$class-type: '%';

@include block('flag') {
    display: table;
    width: 100%;

    @include element('image') {
        padding-right: 10px;

        > img {
            display: block;
            max-width: none;
        }

        @include modifier('rev') {
            padding-right: 0;
            padding-left: 10px;
        }
    }

    @include element('body') {
         width: 100%;
    }

    @include elements('image', 'body') {
        display: table-cell;
        vertical-align: middle;
    }

    @include modifier('top') {
        @include modifies-elements('image','body') {
            vertical-align: top
        }
    }

    @include modifier('bottom') {
        @include modifies-elements('image','body') {
            vertical-align: bottom;
        }
    }
}