获取sass中的父属性值

Question

我正在尝试<a>使用sass为我的应用程序创建顶级样式.网站上的大多数链接都是绿色的,所以我将其作为一种风格.(我正在使用罗盘darken功能)

a {
  color: green;

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

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

a {
  color: green;

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

这样,悬停将始终默认为具体的颜色.这有意义吗？这样的事情可能吗？如果没有,处理这个问题的最佳方法是什么？一个混合？

谢谢!

Answer 1

SASS无法满足您的要求.SASS不构建具有所有元素和属性的对象模型(没有HTML就不可能).

mixin是适用于可重复使用案例的合适解决方案,但对于特殊情况,它是一种过度杀伤力.

只需使用变量:

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

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

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

Answer 2

我会使用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; }