Sass Things for Links

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);

Comments

  1. User Avatar
    Frank
    Permalink to comment#

    Sweet balls, thanks.

  2. User Avatar
    Joseph Rex
    Permalink to comment#

    It just gets better. I’m putting this in my bootstrap sass script right away

  3. User Avatar
    rascojet
    Permalink to comment#

    Neat stuffs!

  4. User Avatar
    Matt Jennings
    Permalink to comment#

    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.

  5. User Avatar
    Dino
    Permalink to comment#

    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.

  6. User Avatar
    Tobi Reif
    Permalink to comment#

    It might be necessary to add “a:link”.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag