BEM Mixins

关于BEM的最佳介绍来自Harry Roberts ：

BEM –意思是块，元素，修饰符–是Yandex的专家们想到的一种前端命名方法。 这是命名CSS类的聪明方法，以使它们对其他开发人员更具透明度和意义。 它们更加严格和信息丰富，这使得BEM命名约定非常适合可能持续一段时间的大型项目的开发人员团队。

从Sass 3.3开始，我们可以这样写：

.block {
    /* CSS declarations for `.block` */

    &__element {
        /* CSS declarations for `.block__element` */
    }

    &--modifier {
        /* CSS declarations for `.block--modifier` */

        &__element {
            /* CSS declarations for `.block--modifier__element` */
        }
    }
}

只要CSS规则简短且基本选择器简单，可读性仍然可以。 但是，当事情变得更加复杂时，这种语法使得很难弄清发生了什么。 因此，我们可能很想为我们的BEM语法构建两个包装混合器：

/// Block Element
/// @access public
/// @param {String} $element - Element's name
@mixin element($element) {
    &__#{$element} {
        @content;
    }
}

/// Block Modifier
/// @access public
/// @param {String} $modifier - Modifier's name
@mixin modifier($modifier) {
    &--#{$modifier} {
        @content;
    }
}

使用全新的mixins重写我们先前的示例：

.block {
    /* CSS declarations for `.block` */

    @include element('element') {
        /* CSS declarations for `.block__element` */
    }

    @include modifier('modifier') {
        /* CSS declarations for `.block--modifier` */

        @include element('element') {
            /* CSS declarations for `.block--modifier__element` */
        }
    }
}

请注意，字符串周围的引号是可选的，我们仅添加它们以提高可读性。

现在，如果您觉得element和modifier太长而无法键入，则可以创建两个较短的别名，如下所示：

/// @alias element
@mixin e($element) {
    @include element($element)  {
        @content;
    }
}

/// @alias modifier
@mixin m($modifier) {
    @include modifier($modifier) {
        @content;
    }
}

使用别名：

.block {
    /* CSS declarations for `.block` */

    @include e('element') {
        /* CSS declarations for `.block__element` */
    }

    @include m('modifier') {
        /* CSS declarations for `.block--modifier` */

        @include e('element') {
            /* CSS declarations for `.block--modifier__element` */
        }
    }
}

翻译自: https://css-tricks.com/snippets/sass/bem-mixins/