從LESS轉換到SCSS

Question

似乎sass-convert會根據搜索結果將LESS轉換爲SCSS。我在以往的項目中使用了以下LESS：

// Examples of how to use .box-shadow mixin 
//.box-shadow (1px 1px 3px 0, 35%, 0, 0, 0); 
//.box-shadow (1px 1px 3px 0, #000); 
//.box-shadow (inset 1px 1px 3px 0, #000); 
.box-shadow (@style, @color) when (iscolor(@color)) { 
    -webkit-box-shadow: @arguments; 
     -moz-box-shadow: @arguments; 
      box-shadow: @arguments; 
} 
.box-shadow (@style, @alpha: 50%, @R: 0, @G: 0, @B: 0) when (isnumber(@alpha)) { 
    .box-shadow (@style, rgba(@R, @G, @B, @alpha)); 
} 

指針，非常感謝。提前致謝。

Answer 1

這是一個近似的轉換，我不認爲你可以對SASS中的mixin參數做條件。將某些值放入規則時會發出警告，例如，它在嘗試編譯50%rgba()時抱怨，因爲它需要從0到1。

@mixin box-shadow($style, $color) { 
    -webkit-box-shadow: unquote($style) $color; 
     -moz-box-shadow: unquote($style) $color; 
      box-shadow: unquote($style) $color; 
} 
@mixin box-shadow-rgba($style, $r: 0, $g: 0, $b: 0, $alpha: 0.5) { 
    @include box-shadow($style, rgba($r, $g, $b, $alpha)); 
} 

// Usage  
div { 
    @include box-shadow-rgba('inset', 255, 0, 0); 
} 

編譯爲：

div { 
    -webkit-box-shadow: inset rgba(255, 0, 0, 0.5); 
    -moz-box-shadow: inset rgba(255, 0, 0, 0.5); 
    box-shadow: inset rgba(255, 0, 0, 0.5); }