Question

我有一个渐变的mixin，目前有两种颜色：

@mixin gradient($color-start, $color-end) {
  background-image: linear-gradient(90deg, $color-start 0%, $color-end 100%);
}

我在任何地方都这样使用

.my-gradient {
  @include gradient(blue, yellow)
}

但现在我想修改mixin（或将其转换为函数），这可以为渐变提供两个或三个参数。

类似（伪代码）：

@mixin gradient($color-start, $color-end, $color-center) {
  ...if $color-center param exists...
  background-image: linear-gradient(90deg, $color-start 0%, $color-center 50%, $color-end 100%);
  ...if $color-center param does not exist...
  background-image: linear-gradient(90deg, $color-start 0%, $color-end 100%);
}

我不确定处理这种情况的最佳方法。

Answer 1

你可以在mixin中编写if-else子句！

datetime) ENGINE=InnoDB
  /home/firdoeshalikhan/Desktop/peatio/db/migrate/20130624011823_create_members.rb:3:in

输出：

    loggerFactory.AddConsole(Configuration.GetSection("Logging"));
    loggerFactory.AddDebug();

请注意，我将@mixin gradient($color-start, $color-end, $color-center:null) { @if($color-center){ background-image: linear-gradient(90deg, $color-start 0%, $color-center 50%, $color-end 100%); }@else{ background-image: linear-gradient(90deg, $color-start 0%, $color-end 100%); } } .test_1{ @include gradient(#000, #111); } .test_2{ @include gradient(#111,#222,#333); }的参数值设置为.test_1 { background-image: linear-gradient(90deg, #000 0%, #111 100%); } .test_2 { background-image: linear-gradient(90deg, #111 0%, #333 50%, #222 100%); }，否则如果您只传递2个参数则会出现错误

如何在mixins中处理可变数量的参数？

1 个答案: