將SASS If/Else塊轉換爲其等價的更少

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條件模擬天生的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);