Get parent attribute value in sass [duplicate]

Question

I am trying to create a top level <a> styling for the for my application using sass. Most of the links across the site are green so I have this as a style. (I'm using compass for the darken function)

a {
  color: green;

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

However, in certain cases the links aren't green. In these cases I'll have to specify both the text color and the hover color, otherwise it will default to hovering to green. I am wondering if there is a way to do this DRYer. Ideally I would be able to get the parent classes color, like so.

a {
  color: green;

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

That way the hover will always default to whatever the color of the specific is. Does this make sense? Is something like this possible? If not, what's the best way to handle this? A Mixin?

Thanks!

Answer 1

What you ask is not possible with SASS. SASS does not build an object model with all elements and properties (it is impossible without HTML).

A mixin is an appropriate solution for a reusable case, but for an ad-hoc case it is an overkill.

Just use a variable:

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

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

Note that you can move the variable into a separate partial where you store all your variables.

Answer 2

I'd use a mixin:

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

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

.foo {
    @include link(green);
}

Rendered CSS:

.foo a { color: green; }

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