引题

在我们日常的 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 上体验。

0 条评论
作者
状态
  • 发布于 ,1 次更新
  • 最后更新于
  • 被浏览 166 次
  • 被评论 0 次
  • 隶属于 文章 版块
  • 归纳于 CSS 分类
  • 收录于 一行代码 专辑
二维码
目录