Sass 符号和属性选择器

Question

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

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

.parent {
    &-child {
    }
}

这给了我以下 css：.parent-child {}.

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

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

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

有人知道如何实现吗？谢谢。

Answer 1

您可以创建 mixin 来为具有数据属性的元素设置样式。

Scss:

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

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

Css 输出：

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

DEMO

Answer 2

我会采用稍微不同的方法，即在包含 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] { ... }
}

Answer 3

您可以使用此 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])'
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;
}

希望对你有帮助

Sass 符号和属性选择器

The Sass ampersand and attribute selectors

css

sass

compass-sass