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

#css #sass

#css — код #sass

Вопрос:

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

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

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

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

Спасибо!

Ответ №1:

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

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

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

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

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

Ответ №2:

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

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

span.button:hover { color: green; }

a.button:hover { color: blue; }
 

Попробуйте сами здесь: http://tinkerbin.com/CBuHSGfV