在Less中将SASS If/Else块转换为其等效块 [英] Converting a SASS If/Else block to its equivalent in Less

问题描述

这里有一些SASS到LESS收敛...有人知道这些的正确语法是什么吗?下面的代码是我以前使用的纯SASS mixins.感谢您的帮助

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

推荐答案

Less使用带有when条件的受保护的混合来模仿if/else逻辑.您可以将SASS mixin转换为它的Less等效项，如下所示.大多数代码是自我解释的(前提是您对Less的工作原理有基本的了解).我还添加了一些内联注释以使其更加清晰.

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

编译后的输出将是

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等之类的值)而不是使用字符串串联方法.以下是有关操作方法的示例.

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.

使用unit函数:

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

使用数学运算:

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

这篇关于在Less中将SASS If/Else块转换为其等效块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！