Преобразование блока SASS If/Else в его эквивалент в Less

Здесь есть небольшая конвергенция SASS и LESS... Кто-нибудь знает, каков правильный синтаксис для них? Код ниже — это чистые миксины SASS, которые я использовал. Спасибо за помощь

@mixin linear-gradient($left, $right, $optional:false) {
  @if $optional and type_of($optional) == number {
    background: -webkit-linear-gradient($optional + deg, $left, $right);
    background: -o-linear-gradient($optional + deg, $left, $right);
    background: -moz-linear-gradient($optional + deg, $left, $right);
    background: linear-gradient($optional + deg, $left, $right);
  } @else {
    @if $optional == "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);
    } @if $optional == "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);
    } @else { // top to bottom
      background: -webkit-linear-gradient($right, $left);
      background: -o-linear-gradient($right, $left);
      background: -moz-linear-gradient($right, $left);
      background: linear-gradient($right, $left);
    }
  }
}

less linear-gradients
person CreativeZoller    schedule 02.10.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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
comment
~"@{optional}deg" - Как всегда, это не очень хорошая идея, даже если в данном конкретном случае это абсолютно нормально, в долгосрочной перспективе повторение этого трюка приводит к большому количеству путаницы, когда он не работает в более сложных случаях. Всегда рекомендуется использовать либо unit, либо @optional * 1deg (даже если они не совпадают с Sass $optional + deg оригинального миксина). - person seven-phases-max; 02.10.2014
comment
@seven-phases-max: Да, согласен. Всегда лучше использовать встроенные функции или математическую операцию. - person Harry; 03.10.2014
comment
Спасибо, Гарри, ты решил мою проблему :) И, основываясь на этом, я смог преобразовать остальные мои условные дерзкие миксины в меньше. - person CreativeZoller; 03.10.2014
comment
@CreativeZoller: Добро пожаловать, приятель. Очень рад, что был полезен :) - person Harry; 03.10.2014