via Alex King, you can use variables for selectors:
$a-tags: 'a, a:active, a:hover, a:visited';
$a-tags-hover: 'a:active, a:hover';
#{$a-tags} {
color: red;
text-decoration: none;
}
#{$a-tags-hover} {
color: blue;
}
You can even nest like that, which is where this gets even more useful:
.module {
#{$a-tags} {
color: blue;
text-decoration: none;
}
}
via Reggie Dawson, you could also make a @mixin to build things out for you. Note that these link pseudo styles are a great use-case for nesting in general.
@mixin linx ($link, $visit, $hover, $active) {
a {
color: $link;
&:visited {
color: $visit;
}
&:hover {
color: $hover;
}
&:active {
color: $active;
}
}
}
The Compass add-on offers a mixin:
@include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
Sweet balls, thanks.
It just gets better. I’m putting this in my bootstrap sass script right away
Neat stuffs!
Thank you! I’ll be using this technique to style anchor tags on my freelance client WordPress site. This seems to be the easiest way to do this.
For people that are interested, I’m using the WP-SCSS WordPress plugin (https://wordpress.org/plugins/wp-scss/) to convert my SCSS file to CSS without using the Ruby SASS gem.
I use something like this too. I added defaults to each color since in most cases it will be the same colors. I am looking to find a way to toggle the text-decoration on or off within the mixing but I am not a Sass expert … yet! I wish I could find a way for it to have two default color choices so I could toggle if it is on dark or light backing.
You can!
https://robots.thoughtbot.com/controlling-color-with-sass-color-functions
You can set to use a new text colour above/below a colour threshold!
https://robots.thoughtbot.com/controlling-color-with-sass-color-functions
It might be necessary to add “a:link”.
It should be noted that the first solution should be nested. If you used a selector like
.nav #{$a-tags}
the resulting selector would be
.nav a, a:active, a:hover, a:visited {
}
This is not likely what the user desires. Nesting the selector, like below
.nav{
#{$a-tags} {
}
}
results in the following CSS
.nav a, .nav a:active, .nav a:hover, .nav a:visited{
}
People really familiar with SCSS may understand the nuances but for this is for the benefit of new SCSS users.