자리 표시 자 Mixin SCSS / CSS

sass에서 자리 표시 자에 대한 믹스 인을 만들려고합니다.

이것이 제가 만든 믹스 인입니다.

@mixin placeholder ($css) {
  ::-webkit-input-placeholder {$css}
  :-moz-placeholder           {$css}
  ::-moz-placeholder          {$css}
  :-ms-input-placeholder      {$css}  
}

이것은 내가 mixin을 포함하는 방법입니다.

@include placeholder(font-style:italic; color: white; font-weight:100;);

분명히 이것은 믹스 인으로 전달되는 모든 콜론과 세미콜론 때문에 작동하지 않을 것입니다. 그러나 ... 저는 정말로 정적 CSS를 입력하고 위의 함수와 똑같이 전달하고 싶습니다.

이게 가능해?

@content지시문을 찾고 있습니다 .

@mixin placeholder {
  ::-webkit-input-placeholder {@content}
  :-moz-placeholder           {@content}
  ::-moz-placeholder          {@content}
  :-ms-input-placeholder      {@content}  
}

@include placeholder {
    font-style:italic;
    color: white;
    font-weight:100;
}

SASS Reference에는 http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content 에서 자세한 정보가 있습니다 .

Sass 3.4부터이 믹스 인은 중첩 및 비 중첩 모두 작동하도록 다음과 같이 작성할 수 있습니다.

@mixin optional-at-root($sel) {
  @at-root #{if(not &, $sel, selector-append(&, $sel))} {
    @content;
  }
}

@mixin placeholder {
  @include optional-at-root('::-webkit-input-placeholder') {
    @content;
  }

  @include optional-at-root(':-moz-placeholder') {
    @content;
  }

  @include optional-at-root('::-moz-placeholder') {
    @content;
  }

  @include optional-at-root(':-ms-input-placeholder') {
    @content;
  }
}

용법:

.foo {
  @include placeholder {
    color: green;
  }
}

@include placeholder {
  color: red;
}

산출:

.foo::-webkit-input-placeholder {
  color: green;
}
.foo:-moz-placeholder {
  color: green;
}
.foo::-moz-placeholder {
  color: green;
}
.foo:-ms-input-placeholder {
  color: green;
}

::-webkit-input-placeholder {
  color: red;
}
:-moz-placeholder {
  color: red;
}
::-moz-placeholder {
  color: red;
}
:-ms-input-placeholder {
  color: red;
}

cimmanon 과 Kurt Mueller가 제공 한 접근 방식 은 거의 효과가 있었지만 부모 참조가 필요하다는 것을 알았습니다 (즉, 각 공급 업체 접두사에 '&'접두사를 추가해야합니다). 이렇게 :

@mixin placeholder {
    &::-webkit-input-placeholder {@content}
    &:-moz-placeholder           {@content}
    &::-moz-placeholder          {@content}
    &:-ms-input-placeholder      {@content}  
}

나는 다음과 같이 mixin을 사용합니다.

input {
    @include placeholder {
        font-family: $base-font-family;
        color: red;
    }
}

상위 참조가 제자리에 있으면 올바른 CSS가 생성됩니다. 예 :

input::-webkit-input-placeholder {
    font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Liberation Serif", Georgia, serif;
    color: red;
}

부모 참조 (&)가 없으면 공급 업체 접두사 앞에 공백이 삽입되고 CSS 프로세서는 선언을 무시합니다. 다음과 같이 보입니다.

input::-webkit-input-placeholder {
    font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Liberation Serif", Georgia, serif;
    color: red;
}

이것은 속기 구문입니다.

=placeholder
  &::-webkit-input-placeholder
    @content
  &:-moz-placeholder
    @content
  &::-moz-placeholder
    @content
  &:-ms-input-placeholder
    @content

그것을 사용하십시오

input
  +placeholder
    color: red

왜 이런 건 아니야?

목록, 반복 및 보간 조합을 사용합니다.

@mixin placeholder ($rules) {

  @each $rule in $rules {
    ::-webkit-input-placeholder,
    :-moz-placeholder,
    ::-moz-placeholder,
    :-ms-input-placeholder {
      #{nth($rule, 1)}: #{nth($rule, 2)};
    }  
  }
}

$rules: (('border', '1px solid red'),
         ('color', 'green'));

@include placeholder( $rules );

'Unclosed block : CssSyntaxError'오류가 sass 컴파일러에서 발생하지 않도록하려면 ';' @content의 끝까지.

@mixin placeholder {
   ::-webkit-input-placeholder { @content;}
   :-moz-placeholder           { @content;}
   ::-moz-placeholder          { @content;}
   :-ms-input-placeholder      { @content;}
}

NoDirection이 작성한 것과 똑같은 sass mixin 자리 표시자를 사용합니다. 여기 sass mixins 컬렉션에서 찾을 수 있으며 매우 만족합니다. 거기에 텍스트 더 유지 mixin 옵션을 설명합니다.