Question

这里有一点SASS很少收敛......有谁知道这些的正确语法是什么？下面的代码是我以前使用的纯SASS mixins。谢谢你的帮助

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

Answer 1

少用when条件保护mixins来模仿if/else逻辑。您可以将SASS mixin转换为Less 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);

将SASS If / Else块转换为Less中的等效块

1 个答案: