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

代码只执行以下操作

$ string 变量负责使用inspect函数将父选择器转换为字符串
$ original 变量负责获取$string变量的 text 内容，即来自'data-parent' <的值'([data-parent])' / LI>
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，为具有数据属性的元素设置样式。

SCSS：

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

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

Css输出：

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

<强> DEMO

Answer 3

我会在包含class属性的元素上使用data略有不同。

<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] { ... }
}

Sass＆符号和属性选择器

3 个答案: