Usage
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.
Examples
Using all parameters
.element a {@include link-colors(red, orange, yellow, green, blue);}
Using only normal and hover parameters with darken() on hover.
.element a {@include link-colors($primary_color, darken($primary_color, 10%));}
Source File
Located in /assets/scss/partials/_mixins.scss on line 80.
@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.
@mixin link-colors($normal, $hover, $active, $visited, $focus){
//Write your own code here, leave it blank, or return false.
}