Huesos
Style
Guide

Repositoire

GitHub

contrast-links

($color)

Overrides all <a> elements against the provided background $color, only if necessary as defined by $lightness-threshold config.

It uses $inverse-link- values from _config.scss.

These values provide for a generic link color inversion. If you need a more specific override, you should use set-link() instead.

Important! This mixin only works at a parent level.

Parameters

  • $color - Background-color to check

Example

.contrast-links {
    background-color: $teal9;
    @include contrast-links($teal9);
}
<div class="contrast-links">
    <a href="/" > I'm a link </a><br>
    <a href="/" > Me too! </a>
</div>