Converting a SASS If/Else block to its equivalent

问题:

There is a little SASS to LESS convergence here... Does anyone know what is the correct syntax for these? The code below is the pure SASS mixins I used to use. Thanks for helping

@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);
    }
  }
}

回答1:

Less uses guarded mixins with when conditions to mimick the if/else logic. You can convert that SASS mixin to its Less equivalent like shown below. Most of the code is self explanatory (provided you have basic understanding of how Less works). I have also added some comments inline to make it clearer.

.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);
    }        
  }
}

and invoke it like (ignore the values for first two params, just dummy)

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);
}

The compiled output would be

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);
}

Note: As mentioned in comments, it is always better to use the built in unit function or the math operation to convert a plain number into degrees (or anything like px, em etc) instead of using the string concatenation method. The following are samples on how to do it.

Using unit function:

background: -webkit-linear-gradient(unit(@optional,deg), @left, @right);

Using math operation:

background: -webkit-linear-gradient(@optional * 1deg, @left, @right);