Sass - групповой символ имени класса

Возможно ли иметь имя подстановочного класса?

например, у меня есть несколько divs .div-one, .div-two, .div-three и т.д. Есть ли способ использовать ниже в sass, чтобы выбрать все div с этим именем или лучше всего дать один класс, который охватывает все и уникальные классы на каждом?

.div-*{}

Ответ 1

В CSS вы можете использовать селектор атрибутов с ^:

div[class^="div-"] ==> Выбирает все div со значением атрибута class, начинающимся с "div-"

Пример:

div {
  height: 20px;
  margin-bottom: 5px;
  border: 1px solid black;
}

div[class^="div-"] {
  border-color: red;
}

<div class="div-one"></div>
<div class="div-two"></div>
<div class="other"></div>
<div class="div-three"></div>

Ответ 2

Небольшое замечание, но я заметил, что при вложении этого правила в Sass вам нужно поставить амперсанд прямо напротив открывающей квадратной скобки.

Это не работает:

.zoomed {
  & [class*=" aspect-"] {
    margin-bottom: $spacer * 4.0;
  }
}

Но это так:

.zoomed {
  &[class*=" aspect-"] {
    margin-bottom: $spacer * 4.0;
  }
}

Обратите внимание на положение амперсанда.

Ответ 3

Вы можете использовать этот метод. Создайте mixin:

@mixin myDIV($name, $color, $color-hover) {
    .div-#{$name} {
        a {
            color: #{$color};
            &:focus, &:hover {
                color: #{$color-hover};
            }
        }
    }
}

Использование:

@include myDIV('one', $blue, $blue-hover);
@include myDIV('two', $green, $green-hover);
@include myDIV('three', $red, $red-hover);

Вы можете изменить переменные ($ blue) и свойства css в соответствии с вашими стилями.

Ответ 4

Принятый ответ теоретический, но в последнем хром на сегодняшний день:

Для правила CSS:

[class^="div-"]

разметка

class="div-something other-class"

тогда как:

class="other-class div-something"

не соответствует

_ (ツ) _/¯