Mixin less

Вопрос-ответ Остальное
1

Всем доброго дня!
подскажите пожалуйста немного разобраться с препроцессором less…
имеем часто используемый код с определенными свойствами, ну например …
-webkit-box-shadow: 0 1рх 30рх #000;
-moz-box-shadow: 0 1рх 30рх #000;
box-shadow: 0 1рх 30рх #000;

по идее необходимо объеденить это все в mixin, ну на пример
.shadow(){
-webkit-box-shadow: 0 1рх 30рх #000;
-moz-box-shadow: 0 1рх 30рх #000;
box-shadow: 0 1рх 30рх #000;
}
и собственно сам вопрос: каким образом можно изменить свойства значений, если они отличаются из представленного mixinA? спасибо!

2

В миксину передается переменная
@mixin border-radius($radius: 5px){
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
По дефолту радиус 5 пикселей, когда применяешь миксину без аргумента, так и останется, если передашь свой аргумент, то радиус поменяется

3

Это вообще синтаксис SASS, но не думаю, что в лессе что-то принципиально отличается

4

Спасибо, работает, безусловно, но…
имея такой код
.box-shadow(@shadow: 0 1px 50px @black){
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
box-shadow: @shadow;
}
а стили требуются отличающиеся от @shadow … то придется определять еще одну переменную со своими значениями? я правильно понимаю?

5

ммм… проще, наверное, вот так сделать
.box-shadow(@xoffset:0, @yoffset:1px, @blur:50px, @color: @black){
-webkit-box-shadow: @xoffset @yoffset @blur @color;
-moz-box-shadow: @xoffset @yoffset @blur @color;
box-shadow: @xoffset @yoffset @blur @color;
}
или нашла вот еще такой вариант
.box-shadow (@string) {
-webkit-box-shadow: @string;
-moz-box-shadow: @string;
box-shadow: @string;
}
как я понимаю, тут просто одной строкой параметр передается и все