Как сделать такой миксин?

Question

[gazes12]

Вот наброски:

@mixin placeholder($text){   /*Сюда должно считыватся значение из placeholder*/
	::placeholder:{
		::focus{
			opacity: 0;			/*При фокусе значение должно изчезать*/
		}
	}
}

Помогите пожалуйста, не знаю как это сделать. заранее спасибо!

Answer 1

[Сергей delphinpro]

@mixin placeholder(){
  &::placeholder {
    color: #ccc;
  }
  &::placeholder:focus {
    opacity: 0;
  }
}

input {
  @include placeholder();
}

Comments

[gazes12]

Спасибо! Ну фокус не хочет работать

[Сергей delphinpro]

gazes12, да. там наоборот нужно писать

&:focus::placeholder

Потому что у плейсхолдера не бывает фокуса. а фокус есть у элемента, у которого может быть плейсхолдер.

Та же самая фигня с псевдоэлементами, кстати.

[gazes12]

Спасибо! Все заработало!