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);
- Tech Tricks answered 10 months ago
- You must login to post comments
Your Answer
Please login first to submit.