萨斯＆符和属性选择器

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. $字符串变量是负责使用inspect功能
2. $原变量负责获取父选择转向一个字符串文本变量的内容$string i。E从'([data-parent])'值'data-parent'
3. 选择替换然后功能与$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

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