Less использует защищенные примеси с условиями when
, чтобы имитировать логику if/else
. Вы можете преобразовать этот миксин SASS в его эквивалент Less, как показано ниже. Большая часть кода говорит сама за себя (при условии, что у вас есть базовое понимание того, как работает Less). Я также добавил несколько встроенных комментариев, чтобы сделать его более понятным.
.linear-gradient(@left, @right, @optional:false) {
& when (isnumber(@optional)) { //just isnumber check should be enough because default value is also not a number
background: -webkit-linear-gradient(~"@{optional}deg", @left, @right);
/* "@{optional}deg" is used for string concatenation, ~ outputs the value w/o quotes */
background: -o-linear-gradient(~"@{optional}deg", @left, @right);
background: -moz-linear-gradient(~"@{optional}deg", @left, @right);
background: linear-gradient(~"@{optional}deg", @left, @right);
}
& when not (isnumber(@optional)) { //else part
& when (@optional = right) { //if value of optional param is right
background: -webkit-linear-gradient(left, @left, @right);
background: -o-linear-gradient(left, @left, @right);
background: -moz-linear-gradient(left, @left, @right);
background: linear-gradient(to right, @left, @right);
}
& when (@optional = left) { //else if value of optional param is left
background: -webkit-linear-gradient(right, @left, @right);
background: -o-linear-gradient(right, @left, @right);
background: -moz-linear-gradient(right, @left, @right);
background: linear-gradient(to left, @left, @right);
}
& when (@optional = false) { // else if the value is the default value
background: -webkit-linear-gradient(@right, @left);
background: -o-linear-gradient(@right, @left);
background: -moz-linear-gradient(@right, @left);
background: linear-gradient(@right, @left);
}
}
}
и вызовите его как (игнорируйте значения для первых двух параметров, просто фиктивный)
div#div1{
.linear-gradient(10px, 10px, 10);
}
div#div2{
.linear-gradient(10px, 10px, right);
}
div#div3{
.linear-gradient(10px, 10px, left);
}
div#div4{
.linear-gradient(10px, 10px);
}
Скомпилированный вывод будет
div#div1 {
background: -webkit-linear-gradient(10deg, 10px, 10px);
background: -o-linear-gradient(10deg, 10px, 10px);
background: -moz-linear-gradient(10deg, 10px, 10px);
background: linear-gradient(10deg, 10px, 10px);
}
div#div2 {
background: -webkit-linear-gradient(left, 10px, 10px);
background: -o-linear-gradient(left, 10px, 10px);
background: -moz-linear-gradient(left, 10px, 10px);
background: linear-gradient(to right, 10px, 10px);
}
div#div3 {
background: -webkit-linear-gradient(right, 10px, 10px);
background: -o-linear-gradient(right, 10px, 10px);
background: -moz-linear-gradient(right, 10px, 10px);
background: linear-gradient(to left, 10px, 10px);
}
div#div4 {
background: -webkit-linear-gradient(10px, 10px);
background: -o-linear-gradient(10px, 10px);
background: -moz-linear-gradient(10px, 10px);
background: linear-gradient(10px, 10px);
}
Примечание. Как упоминалось в комментариях, всегда лучше использовать встроенную функцию unit
или математическую операцию для преобразования простого числа в градусы (или что-то вроде px, em и т. д.) вместо использования строки метод конкатенации. Ниже приведены примеры того, как это сделать.
Использование функции unit
:
background: -webkit-linear-gradient(unit(@optional,deg), @left, @right);
Использование математической операции:
background: -webkit-linear-gradient(@optional * 1deg, @left, @right);
person
Harry
schedule
02.10.2014