如何从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中做混合参数的条件。当你在规则中输入某些值时，你会得到一个警告，例如当它试图在rgba()中编译50%时，它会报错，因为它需要从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); }