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

从LESS转换为SCSS

1 个答案: