Sass中的&符号和属性选择器

Question

我希望创建一个Sass文件，其中选择器将是属性选择器。

当我使用类选择器时，在大多数情况下我会这样做：

.parent {
    &-child {
    }
}

这里给我提供了以下的CSS样式：.parent-child {}。

我想通过属性选择器来实现同样的效果：

[data-parent] {
    &-child {
    }
}

我希望将其变为：[data-parent-child] {}。请问有人知道如何实现吗？谢谢。

- Shota Papiashvili

Answer 1

你可以使用这个 mixin 来解决问题，以获得所需的结果。

@mixin child-attribute($child) {
  $string: inspect(&);
  $original: str-slice($string, 3, -4);
  @at-root #{ selector-replace(&, &, "[#{$original}#{$child}]" ) } {
    @content;
  }
}

代码简单地做了以下几件事情：

1. $string 变量使用 inspect 函数将父级选择器转换为字符串。
2. $original 变量获取 $string 变量的 text 内容，即从 '([data-parent])' 获取值为 'data-parent' 的内容。
3. selector-replace 函数用 $original 变量和 child 变量连接起来，替换掉父级选择器。

当以以下方式使用时：

[data-parent] {
  @include child-attribute('-child') {
    color: green;
  }
}

CSS输出

[data-parent-child] {
  color: green;
}

根据您想要实现的目标，它也可以像这样使用。

[grandparent] {
  @include child-attribute('-parent') {
    color: white;
    @include child-attribute('-child') {
      color: blue;
    }
  }
}

生成以下CSS：

[grandparent-parent] {
  color: white;
}

[grandparent-parent-child] {
  color: blue;
}

希望这能对您有所帮助。

- Adetoyese Kola-Balogun

Answer 2

你可以创建一个 mixin，用于为带有数据属性的元素设置样式。

Scss:

@mixin data($name) {
  [data-#{$name}] {
    @content;
  }
}

* {
  @include data('lol') {
    color: red;
  };
}

CSS 输出：

* [data-lol] {
  color: red;
}

演示

- 3rdthemagical

---

这不是解决方案，因为@include data('lol')不能作为父选择器，这样就失去了创建分层代码的目的。 - Shota Papiashvili

Answer 3

我会采用稍微不同的方式，为包含 data 属性的元素设置一个 class。

<div class="data-obj" data-parent="true"></div>

<div class="data-obj" data-parent-child="true"></div>

然后在你的 SASS 中这样写：

.data-obj {
    ...

    &[data-parent] { ... }
    &[data-parent-child] { ... }
}

- itsphilz