Sass符号和属性选择器

Question

我想要创建一个sass文件，选择器将是属性选择器。

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

.parent {
    &-child {
    }
}

这给了我下面的css：.parent-child {}。

我想用属性选择器实现同样的目标：

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

我想成为：[data-parent-child] {}

有人知道怎么做到这一点吗？谢谢。

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变量的文本内容，即从'([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;
}

希望这对你有帮助

Answer 2

您可以创建mixin，它将为具有数据attri字节的元素设置样式。

Scss：

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

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

Css产出：

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

演示

Answer 3

我会走一条稍微不同的路线，在包含class属性的元素上设置一个data。

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

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

那就在你的蠢货里

.data-obj {
    ...

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