一行代码实现 scss 里用与符号实现组合选择器

Question

引题

在我们日常的 css 中，可能会用到这样的选择器组合：

.abc--x.abc--y {
    color: #ddd;
}

而如果用 scss 直观的写是这样的：

.abc {
    &--x&--y {
        color: #ddd;
    }
}

可以在线体验。而如果通过 #{} 字符串方法来写的话：

.abc {
    #{&--x&--y} {
      color: #ddd;
    }
}

// 编译之后是这样的：
.abc .abc --x .abc --y {
  color: #ddd;
}

添加 @at-root 之后：

.abc {
    @at-root #{&--x&--y} {
      color: #ddd;
    }
}

// 编译之后是这样的：
.abc --x .abc --y {
  color: #ddd;
}

以上都可以看到，编译之后的选择器里多了一个空格。

去空格

那么，如何去除空格呢？很可惜，scss 没有内置的直接方法，不过可以自己实现（来源于 Stack Overflow）：

@function string-remove-whitespace($string) {
    @while (str-index($string, ' ') != null) {
        $index: str-index($string, ' ');
        $string: #{str-slice($string, 0, $index - 1)}#{str-slice($string, $index + 1)};
    }
    @return $string;
}

#{string-remove-whitespace(".abc .def")} {
  color: #ddd;
}

// 编译结果：
.abc.def {
  color: #ddd;
}

选择器组合

基于以上正确结果，我们封装一个选择组合的方法。

@function unify-selector($selectorA, $selectorB) {
  @return #{string-remove-whitespace(#{$selectorA$selectorB})}
}

.abc {
  @at-root #{unify-selector(&--x, &--y)} {
    color: #ddd;
  }
}

// 编译结果
.abc--x.abc--y {
  color: #ddd;
}

完整结果在 codepen 上体验。