Skip to Content
Menu

link-colors()

Easily apply colors for various states of anchor tags (such as hover, focus, active, and visited).

Sass April 23, 2018

Usage

Sass
link-colors($normal, $hover, $active, $visited, $focus)

Parameters

$normal
(Required) (String) The initial color
Default: None

$hover
(Optional) (String) The color when hovering
Default: None

$active
(Optional) (String) The color when active
Default: None

$visited
(Optional) (String) The color when visited
Default: None

$focus
(Optional) (String) The color when focused
Default: None

Parameter Notes

If $active or $focus are not provided, they will fallback to the$hover color (if provided).

If $visited is not provided, it will fallback to the$normal color.

Request or provide clarification »

Examples

Using all parameters

Sass
.element a {@include link-colors(red, orange, yellow, green, blue);}

Using only normal and hover parameters with darken() on hover.

Sass
.element a {@include link-colors($primary_color, darken($primary_color, 10%));}
Was this page helpful? Yes No


    A feedback message is required to submit this form.


    Please check that you have entered a valid email address.

    Enter your email address if you would like a response.

    Thank you for your feedback!

    Source File

    Located in /assets/scss/partials/_mixins.scss on line 80.

    Sass
    @mixin link-colors($normal, $hover: false, $active: false, $visited: false, $focus: false){
        color: $normal;
    
        @if $visited {
            &:visited {color: $visited;}
        } @else if $normal {
            &:visited {color: $normal;}
        }
    
        @if $focus {
            &:focus {color: $focus;}
        } @else if $hover {
            &:focus {color: $hover;}
        }
    
        @if $hover {
            &:hover {color: $hover;}
        }
    
        @if $active {
            &:active {color: $active;}
        } @else if $hover {
            &:active {color: $hover;}
        }
    }
    

    Override

    To override or disable this, redefine the mixin/function later on, or use different class names to prevent this from targeting your element.

    Sass
    @mixin link-colors($normal, $hover, $active, $visited, $focus){
        //Write your own code here, leave it blank, or return false.
    }