BEM Mixin

关于 BEM 最好的介绍来自 Harry Roberts

BEM——代表块 (block)、元素 (element)、修饰符 (modifier)——是一种由 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 语法构建两个包装 mixin

/// 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;
    }
}

使用我们全新的 mixin 重写之前的示例

.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` */
        }
    }
}