SASS и выбор атрибутов данных и вложение
14226 просмотра
2 ответа
Я хотел бы применить некоторый стиль к элементам с атрибутом данных, product
а также к конкретным продуктам.
Есть ли способ сделать что-то подобное?
// SASS
[data-product] {
color: #000;
&[="red"] { // <- this line
color: #f00;
}
}
Автор: franksort
Источник
Размещён: 13.11.2019 11:34
Ответы (2)
12 плюса
До Sass 3.4 это просто невозможно. Здесь важными особенностями являются возможность сохранения текущего селектора в переменной и возможность разбивать строку (хотя последняя может быть создана с помощью функций SassScript).
@mixin append-attr($x) {
$sel: &;
$collector: ();
@for $i from 1 through length($sel) {
$s: nth($sel, $i);
$last: nth($s, -1);
@if str-slice($last, -1) == "]" {
// if is just the bare attribute with no value, $offset will be -1, otherwise it will be -2
$offset: -1;
$current-x: $x;
@if str-slice($last, -2) == '"]' {
// this attribute already has a value, so we need to adjust the offset
$offset: -2;
} @else {
// no attribute value, so add the equals and quotes
$current-x: '="' + $x + '"';
}
$last: str-slice($last, 1, $offset - 1) + $current-x + str-slice($last, $offset);
$collector: append($collector, set-nth($s, -1, $last), comma);
} @else {
// following line will append $x to your non-attribute selector
$collector: append($collector, selector-append($s, $x), comma);
// the following line will not change your non-attribute selector at all
//$collector: append($collector, $s, comma);
}
}
@at-root #{$collector} {
@content;
}
}
Использование:
[data-product] {
color: white;
@include append-attr("red") {
color: red;
@include append-attr('-green') {
color: green;
}
}
}
[one], [two] {
color: orange;
@include append-attr('alpha') {
color: yellow;
}
}
[test], .test {
@include append-attr('-one') {
color: red;
}
}
.bar input[min] {
@include append-attr('5') {
background: yellow;
}
}
Выход:
[data-product] {
color: white;
}
[data-product="red"] {
color: red;
}
[data-product="red-green"] {
color: green;
}
[one], [two] {
color: orange;
}
[one="alpha"], [two="alpha"] {
color: yellow;
}
[test="-one"], .test-one {
color: red;
}
.bar input[min="5"] {
background: yellow;
}
Связано: изменение середины селектора в Sass (добавление / удаление классов и т. Д.)
Автор: cimmanon Размещён: 19.08.2014 01:03-3 плюса
input[data-product] {
color: #000;
}
input[data-product=red] {
color: #f00;
}
Вам не нужно вкладывать, второй стиль будет перекрывать первый.
Автор: Phakamani Mkulise Размещён: 01.11.2015 09:28Вопросы из категории :
- sass Как я могу процитировать строки в SASS?
- sass Создание Sass Mixin с необязательными аргументами
- sass Есть ли SASS.js? Что-то вроде LESS.js?
- sass Можно ли импортировать весь каталог в sass, используя @import?
- sass Escape # in SASS
- sass Использование сжатого вывода Sass при оставлении заголовка комментария к теме для Wordpress
- sass В чем разница между SCSS и Sass?
- sass Проблемы с Ruby 1.9 и Sass. (от ASCII-8BIT до UTF-8)
- sass Sass Invalid CSS Error: «ожидаемое выражение»
- sass Создание или обращение к переменным динамически в Sass
- sass Сделать обратное вложение в scss?
- sass Использование переменных Sass с медиазапросами CSS3
- sass sass css: целевой родительский класс от дочернего
- sass sass-rails helpers «image-url», «asset-url» не работают в рельсах 3.2.1
- sass Is there a way to import variables from javascript to sass or vice versa?
- sass Eclipse плагин для автоматической компиляции файлов Sass
- sass Including another class in SCSS
- sass Как мне запустить Ruby Gem?
- sass Что значит '&.' в '& .sub-title' указывает на scss?
- sass CSS Framework, который автоматически обрабатывает префиксы поставщиков?