css - 如何进行从 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()需要 from 0to 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); }