SCSS селектор выбора

Question

Я только начал использовать sass / scss, и у меня небольшая проблема. Давайте предположим этот код:

.button {
  color:#c00;
  &:hover {
    color:#000;
  }
}

Все классно и работает как положено. Но .. Допустим, я хочу делать разные зависания в зависимости от тега. Таким образом, если тег представляет собой span, чтобы показать цвет, и если тег является a, чтобы показать другой цвет.

Возможно ли это без повторения какой-либо части селектора?

Спасибо!

Answer 1

Нет.Помните, что в конце концов все компилируется в CSS.

Способ сделать это будет следующим:

.button {
  .green {
    color:green;
    &:hover { color:black; }
  }
  .red {
    color:red;
    &:hover { color:black; }
  }
}

Хотя вам нужно будет добавить класс.

Вы можете использовать миксин-подход, но он будет более многословным.

Answer 2

Я бы сделал это так:

.button {
  color: red;
  &:hover { color: black; }
}

span.button:hover { color: green; }

a.button:hover { color: blue; }

Играйте сами здесь: http://tinkerbin.com/CBuHSGfV