在sass中获取父属性值[重复]答案

【问题标题】：Get parent attribute value in sass [duplicate]在sass中获取父属性值[重复]
【发布时间】：2013-08-08 09:00:42
【问题描述】：

我正在尝试使用 sass 为我的应用程序创建顶级 <a> 样式。网站上的大部分链接都是绿色的，所以我把它作为一种风格。（我将指南针用于darken 函数）

a {
  color: green;

  &:hover {
    color: darken(green, 10%);
  }
}

但是，在某些情况下，链接不是绿色的。在这些情况下，我必须同时指定文本颜色和悬停颜色，否则它将默认悬停为绿色。我想知道是否有办法做到这一点 DRYer。理想情况下，我可以像这样获得父类的颜色。

a {
  color: green;

  &:hover {
    color: darken(parent(color), 10%);
  }
}

这样，悬停将始终默认为特定颜色的任何颜色。这有意义吗？这样的事情可能吗？如果没有，处理这个问题的最佳方法是什么？一个 Mixin？

谢谢！

【问题讨论】：

【解决方案1】：

我会使用 mixin：

@mixin link($color) {
    a { color: $color};

    &:hover { color: darken($color, 10%) };
}

.foo {
    @include link(green);
}

渲染的 CSS：

.foo a { color: green; }

.foo a:hover { color: #004d00; }

【讨论】：

【解决方案2】：

您所问的问题在 SASS 中是不可能实现的。 SASS 不会构建包含所有元素和属性的对象模型（没有 HTML 是不可能的）。

对于可重用的情况，mixin 是一种合适的解决方案，但对于临时情况来说，它是一种矫枉过正。

只使用一个变量：

a {
  $link-color: green;
  color: $link-color;

  &:hover {
    color: darken($link-color, 10%);
  }
}

请注意，您可以将变量移动到存储所有变量的单独部分中。

【讨论】：