css - sassで親属性値を取得する

Question

<a>sass を使用してアプリケーションのトップレベルのスタイリングを作成しようとしています。サイト全体のリンクのほとんどは緑色なので、これをスタイルとして使用しています。（私はdarken機能にコンパスを使用しています）

a {
  color: green;

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

ただし、リンクが緑色でない場合もあります。このような場合、テキストの色とホバーの色の両方を指定する必要があります。指定しないと、デフォルトで緑にホバーします。このDRYerを行う方法があるかどうか疑問に思っています。理想的には、そのように親クラスの色を取得できるでしょう。

a {
  color: green;

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

そうすれば、ホバーは常に特定の色が何であれデフォルトになります。これは理にかなっていますか？このようなことは可能ですか？そうでない場合、これを処理する最善の方法は何ですか? ミックスイン?

ありがとう！

score 10 · Accepted Answer

あなたが求めることは、SASSでは不可能です。SASS は、すべての要素とプロパティを含むオブジェクトモデルを構築しません (HTML なしでは不可能です)。

mixin は再利用可能なケースには適切なソリューションですが、アドホックなケースではやり過ぎです。

変数を使用するだけです：

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

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

すべての変数を格納する別のパーシャルに変数を移動できることに注意してください。

score 6 · Accepted Answer

私はミックスインを使用します：

@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 に答える 2