Question

我使用sass并使用带有BEM的＆符重复父选择器，例如 -

.c-block {
 background:red;
 &__element {font-size:14px;}
 &--modifier {background:blue;}
}

此输出 -

.c-block {
  background: red;
}
.c-block__element {
  font-size: 14px;
}
.c-block--modifier {
  background: blue;
}

这使得类名的未来更新变得简单易行 - 在一个地方更改并排序！

现在，使用修饰符和定位他们的孩子会变得更复杂：

.c-block {
  background:red;
  &__element {font-size:14px;}
  &--modifier {background:blue;
    .c-block__element {font-size:20px;}     
  }
}

请注意我是否必须重复课程名称＆＃39; .c-block＆＃39;。有什么方法可以避免这种情况吗？我只想要一个类名声明，它在我的样式中引用并在一个地方轻松更改。

使用变量是避免类名重复的唯一方法吗？例如 -

.c-block {
  $class: c-block;

  background:red;
  &__element {font-size:14px;}
  &--modifier {background:blue;
    & .#{$class}__element  {font-size:20px;}
    // the above line = .c-block--modifier .c-block__element
  }
}

我一直认为必须有一些更好的sass + BEM方法，而不是使用变量。

Answer 1

作为使用BASS和SASS的人，你的问题让我很好奇，我在快速谷歌发现了以下文章（关于CSS技巧），here是它的链接。我们可以创建mixins来帮助实现你想要的东西，而不是使用变量，如下所示：

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

然后你可以像这样输出你的SASS：

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

希望这在某种程度上有所帮助！

使用BEM + Sass父选择器来定位修饰符的子元素，而不重复类名

1 个答案: