web-dev-qa-db-ja.com

CSS LESSプレースホルダーミックスイン

以下のようにプレースホルダーミックスインを作成したいと思います。ただし、これはLESSバージョン1.7.0ではコンパイルできません。

.placeholder(...) {
    ::-webkit-input-placeholder: @arguments;
    :-moz-placeholder: @arguments;
    ::-moz-placeholder: @arguments;
    :-ms-input-placeholder: @arguments;
}
csslessmixins
16
Aydus-Matthew

入力プレースホルダーは、プロパティではなくセレクターであるため、CSS構文は、生成しようとしているplaceholder { ... }ではなくplaceholder: ...です。

あなたがそれを修正した場合：

.placeholder(...) {
    ::-webkit-input-placeholder {border:@arguments}
    ::-moz-placeholder {border:@arguments}
    :-ms-input-placeholder {border:@arguments}
}

それはコンパイルされ、あなたがそれを呼び出すと：

.placeholder(solid; 1px; blue;);

それはこのCSSを生成します：

::-webkit-input-placeholder {
  border: solid 1px #0000ff;
}
::-moz-placeholder {
  border: solid 1px #0000ff;
}
:-ms-input-placeholder {
  border: solid 1px #0000ff;
}

（入力オブジェクトへの実際の影響とは関係なく、汎用CSSプロパティの例としてborder:を含めただけです）

14
helderdarocha

Mixinでは、プレースホルダーのCSSルールを使用できます。

.placeholder(@rules) {

    &::-webkit-input-placeholder {
        @rules();
    }
    &:-moz-placeholder {
        @rules();
    }
    &::-moz-placeholder {
        @rules();
    }
    &:-ms-input-placeholder {
        @rules();
    }
}

使用例：

.placeholder({
    color: #0000FF;
    text-transform: uppercase;
});
71
Aydus-Matthew

プレースホルダーセレクターを囲む中括弧がありません。

スタイルは次のようになります。

.placeholder(@color) {
    ::-webkit-input-placeholder {
        color: @color;
    }
    :-moz-placeholder {
        color: @color;
    }
    ::-moz-placeholder {
      color: @color;
    }
}
2
Marc