Skip to Content

link-bg-colors()

Change the background color for various states including normal, hover, active, visited, and focus.

Sass April 23, 2018

Usage

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

Parameters

$normal
(Required) (String) The background color of the normal state
Default: None

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

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

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

$focus
(Optional) (String) The background 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

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

Source File

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

Sass
@mixin link-bg-colors($normal, $hover: false, $active: false, $visited: false, $focus: false){
    background-color: $normal;

    @if $visited {
        &:visited {background-color: $visited;}
    } @else if $normal {
        &:visited {background-color: $normal;}
    }

    @if $focus {
        &:focus {background-color: $focus;}
    } @else if $hover {
        &:focus {background-color: $hover;}
    }

    @if $hover {
        &:hover {background-color: $hover;}
    }

    @if $active {
        &:active {background-color: $active;}
    } @else if $hover {
        &:active {background-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-bg-colors($normal, $hover, $active, $visited, $focus){
    //Write your own code here, leave it blank, or return false.
}