我希望创建一个Sass文件,其中选择器将是属性选择器。
当我使用类选择器时,在大多数情况下我会这样做:
.parent {
&-child {
}
}
这里给我提供了以下的CSS样式:.parent-child {}
。
我想通过属性选择器来实现同样的效果:
[data-parent] {
&-child {
}
}
我希望将其变为:
[data-parent-child] {}
。请问有人知道如何实现吗?谢谢。我希望创建一个Sass文件,其中选择器将是属性选择器。
当我使用类选择器时,在大多数情况下我会这样做:
.parent {
&-child {
}
}
这里给我提供了以下的CSS样式:.parent-child {}
。
我想通过属性选择器来实现同样的效果:
[data-parent] {
&-child {
}
}
[data-parent-child] {}
。请问有人知道如何实现吗?谢谢。mixin
来解决问题,以获得所需的结果。@mixin child-attribute($child) {
$string: inspect(&);
$original: str-slice($string, 3, -4);
@at-root #{ selector-replace(&, &, "[#{$original}#{$child}]" ) } {
@content;
}
}
inspect
函数将父级选择器转换为字符串。$string
变量的 text 内容,即从 '([data-parent])'
获取值为 'data-parent'
的内容。$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;
}
}
}
[grandparent-parent] {
color: white;
}
[grandparent-parent-child] {
color: blue;
}
mixin
,用于为带有数据属性的元素设置样式。@mixin data($name) {
[data-#{$name}] {
@content;
}
}
* {
@include data('lol') {
color: red;
};
}
CSS 输出:
* [data-lol] {
color: red;
}
我会采用稍微不同的方式,为包含 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] { ... }
}
@include data('lol')
不能作为父选择器,这样就失去了创建分层代码的目的。 - Shota Papiashvili