CSS LESS Yer Tutucu Karıştırıcı

Question

Aşağıdaki gibi bir yer tutucu karışımı oluşturmak istiyorum. Ancak, bu LESS sürüm 1.7.0'da derleme başarısız olur.

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

Answer 1

Girdi yer tutucular seçiciler, değil nitelik vardır ve böylece onların CSS sözdizimi, oluşturmak çalışıyoruz placeholder: ...placeholder { ... } değildir.

Bunu düzeltmek ise:

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

O derlemek olacak ve bunu çağırdığınızda:

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

(Sadece dahil:

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

bu CSS üretecektir border:, bir giriş nesnesindeki gerçek etkisinden bağımsız olarak genel bir CSS özelliği örneğidir)

Answer 2

Sen tutucu seçicileri etrafında süslü parantez eksik. aşağıdaki gibi

stilleri olmalıdır:

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

Answer 3

Mixin, herhangi bir yer tutucu css kurallarına izin verir.

.placeholder(@rules) { 

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

Örnek kullanım:

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