Css Sass符号和属性选择器

我想创建一个sass文件，使选择器成为属性选择器

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

.parent {
    &-child {
    }
}

这给了我以下css:

.parent-child{}

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

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

我想成为：

[data parent child]{}

---

有人知道如何做到这一点？谢谢。

您可以创建

mixin

，为具有数据属性的元素设置样式

Scss：

Css输出：

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

---

我会选择稍微不同的方法，在包含

数据

属性的元素上使用

类

那就用你的无礼去做吧

.data-obj {
    ...

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

---

您可以使用此

mixin

作为解决方法，以获得所需的结果

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

代码只执行以下操作

$string变量负责使用

inspect

函数将父选择器转换为字符串

$original变量负责获取

$string

变量的文本内容，即

'data-parent'

来自

'（[data parent]）的值
'

选择器替换函数然后将父选择器替换为

$original

变量和

子变量的串联

当按以下方式使用时

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

---

希望这对您有所帮助

这不是解决方案，因为

@include data（'lol'）

不能作为父选择器，而这忽略了创建层次代码的所有目的。

[grandparent-parent] {
  color: white;
}

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