Question

我使用了less2sass npm将一些LESS转换为SASS，我有几个部分没有正确转换并在SASS编译期间引发错误。

原始的不太像：

.btn-default {
     #gradient > .vertical(@start-color: @gradient-default-start;
    @end-color: @gradient-default-end
    );
}

转换后的SASS如下所示：

.btn-default {
     #gradient > @include vertical($start-color: $gradient-default-start;
    $end-color: $gradient-default-end
    );
}

我对LESS不太熟悉，无法理解发生了什么。请帮帮忙？！

Answer 1

在SASS（SCSS）中，您可以编写以下代码：

// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
  background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);  // Safari 5.1-6, Chrome 10+
  background-image: -o-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);  // Opera 12
  background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down
}

$gradient-default-start: red;
$gradient-default-end: green;

.btn-default {
@include gradient-vertical($start-color: $gradient-default-start, $end-color: $gradient-default-end);
}

上面的SCSS代码将输出如下所示的CSS代码：

.btn-default {
  background-image: -webkit-linear-gradient(top, red 0%, green 100%);
  background-image: -o-linear-gradient(top, red 0%, green 100%);
  background-image: linear-gradient(to bottom, red 0%, green 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFF0000', endColorstr='#FF008000', GradientType=0); }

上面的垂直渐变已从Official Sass port of Bootstrap复制。

您的原始Less代码使用#gradient > .vertical()，这意味着.vertical() mixin已namespaced。要在SCSS中使用该代码，您必须将其重写为正常的＆＃39;首先是mixin，所以删除#gradient的{{1}}包裹，然后你可以将mixin称为任何其他mixin。

Answer 2

在Sass中，您不能在选择器中包含内联。如果您想将vertical mixin的结果嵌套在#gradient >中，您可以明确地这样做：

.btn-default {
  #gradient > {
    @include vertical($start-color: $gradient-default-start,
                      $end-color: $gradient-default-end);
  }
}

你可以通过组合两个选择器来使这个更加轻松：

.btn-default #gradient > {
  @include vertical($start-color: $gradient-default-start,
                    $end-color: $gradient-default-end);
}

无法将LESS的片段转换为SASS

2 个答案: