Вложенный селектор Sass с помощью амперсанда с разными тегами - PullRequest
Новая
       25

Вложенный селектор Sass с помощью амперсанда с разными тегами

0 голосов
/ 23 января 2019

Есть ли способ использовать sass для указания стиля в зависимости от tag при вложении с несколькими селекторами классов?Например, когда у вас есть универсальный селектор класса, и вам нужно по-разному его стилизовать, когда это span или a.Примерно так (это не работает): 

.foo > .bar > .item {
    display: block;
    font-weight: 700;

    &span {
        color: blue;
    }
    &a {
        color: red;
    }
}

Работает с классами, но для тегов я не могу найти способ.Жаль, что есть селектор css :not(), но нет :is(), который бы сработал.

1 Ответ

0 голосов
/ 23 января 2019

Я не думаю, что вы можете стать намного ближе, чем это: 

.foo > .bar > {
  & .item {
    display: block;
    font-weight: 700;
  }
  & span.item {
    color: blue;
  }
  & a.item {
    color: red;
  }
}

Рабочий кодекс здесь: https://codepen.io/MrLister/pen/gqbqzX

А вот фрагмент скомпилированного CSS. 

.foo > .bar > .item {
  display: block;
  font-weight: 700;
}
.foo > .bar > span.item {
  color: blue;
}
.foo > .bar > a.item {
  color: red;
}
<main class="foo">
  <section class="bar">
    <div class="item">A div item </div>
    <span class="item"> A span item</span>
    <a class="item"> An a item</a>
  </section>
</main>
...