寫LESS mixin for box-shadow：無

我在使用LESS css編寫box-shadow mixin時出現問題。寫LESS mixin for box-shadow：無

以下是密新的的box-shadow

.boxShadow (@x, @y, @blur, @spread: 0, @alpha) { 
    -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); 
    -moz-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); 
    box-shadow:  @x @y @blur @spread rgba(0, 0, 0, @alpha); 
}

，但我可以沒有問題能夠通過參數，

.boxShadow(0, 0, 5px, 2px, 0.2);

但如何調用同一混入了箱 - shadow：無

來源

2015-07-10 vishnu

有一種方法可以訪問一個變量中的所有mixin參數。

你可以寫這樣你的LESS的mixin：

.box-shadow(...) 
{ 
    -webkit-box-shadow: @arguments; 
    -moz-box-shadow: @arguments; 
    box-shadow: @arguments; 
}

並在以後使用它：

.box-shadow(0 0 5px 2px rgba(0, 0, 0, 0.2));

或

.box-shadow(none);

來源

2015-07-10 10:36:46

這是對這個問題的更好回答。在附註（對於問題的OP）中，'box-shadow'屬性現在已經很長時間不需要瀏覽器前綴了。 – Harry

你是對的，但IE8不同意你:) http://caniuse.com/#search=box-shadow –

我的意思是支持'box-shadow'瀏覽器前綴的瀏覽器不再需要。 IE8甚至不支持'box-shadow' :) – Harry

-4

.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) { 
    -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); 
    -moz-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); 
    box-shadow:  @x @y @blur @spread rgba(0, 0, 0, @alpha); 
} 
.inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) { 
    -webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha); 
    -moz-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha); 
    box-shadow:   inset @x @y @blur @spread rgba(0, 0, 0, @alpha); 
}

來源

2015-07-10 10:30:27

這甚至回答**如何調用相同的mixin來獲得'box-shadow：none' **？我很驚訝，這已經累積了兩個讚揚。 – Harry

同意，這增加了另一個mixin，而不是使用1 –

.boxShadow(@x, @y, @blur, @spread: 0, @alpha) { 
    -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); 
     -moz-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); 
      box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); 
} 

.boxShadow(none) { 
    -webkit-box-shadow: none; 
     -moz-box-shadow: none; 
      box-shadow: none; 
}

問題是，您可以在Less中定義具有相同名稱但不同參數的mixin。只需「覆蓋」你的mixin，少用會找到一個具有相同參數模式的人。

來源

2015-07-10 16:42:48 Justineo

寫LESS mixin for box-shadow：無

回答

相關問題