CSS LESS佔位符Mixin

我想創建一個佔位符mixin，如下所示。但是，這不能在LESS 1.7.0版中編譯。CSS LESS佔位符Mixin

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

來源

2014-05-19 Aydus-Matthew

這並不編譯，因爲它試圖產生畸形CSS。 – helderdarocha

輸入佔位符的選擇，而不是屬性，因此他們的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; 
}

（我只是包括border:作爲通用CSS屬性的示例，與其對輸入對象的實際效果無關）

來源

2014-05-19 02:23:41 helderdarocha

這可以工作並闡明@arguments參數的用法。這幫助我把我的最終mixin允許任何佔位符規則。 –

您錯過了佔位符選擇器周圍的大括號。

的風格應該是如下：

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

來源

2014-05-19 02:09:39 Marc

Mixin允許任何佔位符CSS規則。

.placeholder(@rules) { 

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

用法示例：

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

來源

2014-05-19 04:08:04

你使用哪種版本 - 它不能編譯我 –

用'lessc -v' 2.0.0適合我。＆符號和傳入的規則使得這種方式比接受的答案更有用。 – amwinter

感謝您的好語法！ '@rules（）'之後，這些parens有什麼作用？我以爲parens只用於參數混合？ – ptim

CSS LESS佔位符Mixin

回答

相關問題