Question

我知道inherit和initial属性，但我不想要它们。我想给出最后一条CSS规则的相同值。基本上，占位符或假人。

我想这样做的原因是因为我正在使用Compass mixin link-colors：

@mixin link-colors($normal, $hover: false, $active: false, $visited: false, $focus: false) {
  color: $normal;
  @if $visited {
    &:visited {
      color: $visited;
    }
  }
  @if $focus {
    &:focus {
      color: $focus;
    }
  }
  @if $hover {
    &:hover {
      color: $hover;
    }
  }
  @if $active {
    &:active {
      color: $active;
    }
  }
}

我不想为第一个参数设置任何内容，即$ normal。我知道我可以将值设置为各自的名称，如下所示：

@include link-colors($hover: $nav-link-hover-color, $active: $nav-link-hover-color);

然而，这会给我一个错误，因为我没有给$ normal分配任何东西。

如您所见，$ normal不是可选的;但是，我只想将颜色设置为其他颜色，而不是正常颜色。它之前已经设置了颜色，我不想覆盖它。

另外，有没有办法为所有参数设置一个值？说link-colors(white)并继续设置所有参数？

Answer 1

如果您想要的是所有参数都是相同的值，那么您正在寻找的功能通常称为 fill 或 array-fill 在其他语言中。只要你确切知道mixin需要多少参数，你就可以了：

@function array-fill($value, $n) {
    $list: ();
    @for $i from 1 through $n {
        $list: append($list, $value);
    }
    @return $list;
}

a {
  @include link-colors(array-fill(white, 5)...);
}

输出：

a {
  color: white;
}
a:visited {
  color: white;
}
a:focus {
  color: white;
}
a:hover {
  color: white;
}
a:active {
  color: white;
}

如果您希望能够指定特定值而不使用$normal参数，则可以通过将null作为该参数的值传递来执行此操作：

@include link-colors(null, $hover: $nav-link-hover-color, $active: $nav-link-hover-color);

输出：

a:hover {
  color: white;
}
a:active {
  color: white;
}

您还可以将这些解决方案结合起来：

a {
  @include link-colors(null, array-fill(white, 4)...);
}

输出：

a:visited {
  color: white;
}
a:focus {
  color: white;
}
a:hover {
  color: white;
}
a:active {
  color: white;
}

如何在Sass或CSS中获取最后分配的属性的值？

1 个答案: