薩斯＆符和屬性選擇器

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