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

Question

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

我想这样做的原因是因为我正在使用 Compass mixin 链接颜色:

@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- 的函数填写其他语言。只要您确切知道 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;
}