Как в sass совместить hover и placeholder?

Question

[AlexNew22]

Как сделать такую запись на sass?

#box:hover::placeholder { 
  color:red;
}

Так почему-то не работает

&:hover
    &::placeholder
      color: red

&:hover::placeholder
    color: red

Comments

[Сергей delphinpro]

должно работать.
Но уж если вы почему-то используете sass, а не scss, то следите за отступами. Их лучше делать одинаковыми.

Answer 1

[inkShio]

@mixin placeholder-color($color)
{
	&::-webkit-input-placeholder
	{
		/* WebKit, Blink, Edge */
		text-overflow: ellipsis;

		opacity: 1;
		color: $color;
	}
	&:-moz-placeholder
	{
		/* Mozilla Firefox 4 to 18 */
		text-overflow: ellipsis;

		opacity: 1;
		color: $color;
	}
	&::-moz-placeholder
	{
		/* Mozilla Firefox 19+ */
		text-overflow: ellipsis;

		opacity: 1;
		color: $color;
	}
	&:-ms-input-placeholder
	{
		/* Internet Explorer 10-11 */
		text-overflow: ellipsis;

		opacity: 1;
		color: $color;
	}
	&::-ms-input-placeholder
	{
		/* Microsoft Edge */
		text-overflow: ellipsis;

		opacity: 1;
		color: $color;
	}
	&::placeholder
	{
		/* Most modern browsers support this now. */
		text-overflow: ellipsis;

		opacity: 1;
		color: $color;
	}
}

.link {
  @include placeholder-color(#ccc);
  &:hover {
    @include placeholder-color(#000);
  }
}

Comments

[Сергей delphinpro]

Какой ужас. Проще автопрефиксер подключить и использовать чистую запись

.link {
  &::placeholder: #ccc;
  &:hover {
    &::placeholder: #000;
  }
}

[inkShio]

Сергей delphinpro, тоже вариант)

Answer 2

[sky_host]

#box::hover::-webkit-input-placeholder { color:red}
для мозилы
#box::hover::-moz-placeholder { color:red}