Created
January 9, 2017 15:46
-
-
Save domjtalbot/18e78676a73135ddd0cdd0a350369995 to your computer and use it in GitHub Desktop.
Style external links against a list of approved internal domains using only Scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/// List of internal urls / not deemed external | |
/// @type list | |
$domains: ( | |
('github.com'), | |
('google.com') | |
); | |
/// Build chained :not() for internal domains | |
/// @param {list} $list [$domains] - List of approved domains | |
/// @requires $domains | |
/// @content | |
/// @outputs built chained :not() selector for domains | |
/// @example | |
/// @include externallink() { | |
/// // Styles | |
/// } | |
/// @example | |
/// @include externallink($domainlist) { | |
/// // Styles | |
/// } | |
@mixin externallink($list: $domains) { | |
$output: '[href^="http"]'; | |
@if (length($list) == 1) { | |
$list: nth($list, 1); | |
} | |
@each $url in $list { | |
$output: $output + ':not([href*="#{$url}"])'; | |
} | |
@debug($output); | |
&#{$output} { | |
@content; | |
} | |
} | |
a { | |
@include externallink() { | |
// External link styling | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment