LESS에서 플레이스홀더에 스타일 추가하기

크로스 브라우저 방식으로 placeholder 유사 요소를 통해 스타일을 추가하는 함수를 만들어 봅시다:

styles.less.placeholder(@code) {
  &::-webkit-input-placeholder {
    @code();
  }
  &:-ms-input-placeholder {
    @code();
  }
  &::-moz-placeholder {
    @code();
  }
  &::placeholder {
    @code();
  }
}

우리가 만든 함수를 사용해 보겠습니다:

styles.lessinput {
  .placeholder({
    color: white; 
    background-color: red;
  });
}

컴파일 결과:

styles.cssinput::-webkit-input-placeholder {
  color: white; 
  background-color: red;
}
input::-ms-input-placeholder {
  color: white; 
  background-color: red;
}
input::-moz-placeholder {
  color: white; 
  background-color: red;
}
input::placeholder {
  color: white; 
  background-color: red;
}