{"id":193485,"date":"2015-01-17T08:18:03","date_gmt":"2015-01-17T15:18:03","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=193485"},"modified":"2015-01-17T08:18:03","modified_gmt":"2015-01-17T15:18:03","slug":"sass-things-links","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/sass\/sass-things-links\/","title":{"rendered":"Sass Things for Links"},"content":{"rendered":"<p><a href=\"http:\/\/alexking.org\/blog\/2013\/08\/22\/sass-variables-for-selectors\" rel=\"noopener\">via<\/a> Alex King, you can use variables for selectors:<\/p>\n<pre rel=\"SCSS\"><code class=\"language-scss\">$a-tags: 'a, a:active, a:hover, a:visited';\r\n$a-tags-hover: 'a:active, a:hover';\r\n \r\n#{$a-tags} {\r\n  color: red;\r\n  text-decoration: none;\r\n}\r\n#{$a-tags-hover} {\r\n  color: blue;\r\n}<\/code><\/pre>\n<p>You can even nest like that, which is where this gets even more useful:<\/p>\n<pre rel=\"SCSS\"><code class=\"language-scss\">.module {\r\n  #{$a-tags} {\r\n    color: blue;\r\n    text-decoration: none;\r\n  } \r\n}<\/code><\/pre>\n<hr>\n<p><a href=\"http:\/\/www.sitepoint.com\/sass-basics-the-mixin-directive\/\" rel=\"noopener\">via<\/a> 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. <\/p>\n<pre rel=\"SCSS\"><code class=\"language-scss\">@mixin linx ($link, $visit, $hover, $active) {\r\n  a {\r\n    color: $link;\r\n    &amp;:visited {\r\n      color: $visit;\r\n    }\r\n    &amp;:hover {\r\n      color: $hover;   \r\n    }\r\n    &amp;:active {\r\n      color: $active;\r\n    }\r\n  }\r\n}<\/code><\/pre>\n<hr>\n<p>The Compass add-on <a href=\"http:\/\/compass-style.org\/reference\/compass\/typography\/links\/link_colors\/\" rel=\"noopener\">offers<\/a> a mixin:<\/p>\n<pre rel=\"SCSS\"><code class=\"language-scss\">@include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>via Alex King, you can use variables for selectors: $a-tags: &#8216;a, a:active, a:hover, a:visited&#8217;; $a-tags-hover: &#8216;a:active, a:hover&#8217;; #{$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 [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":191187,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":191767,"url":"https:\/\/css-tricks.com\/snippets\/sass\/simplifying-contexts-events\/","url_meta":{"origin":193485,"position":0},"title":"Simplifying Contexts and Events","date":"December 29, 2014","format":false,"excerpt":"Sass can somehow be a little of a black box, especially for young developers: you put some things in, you get some things out. Take the selector reference (&) for instance, it is a bit scary. That being said, it doesn't have to be like this. We can make its\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14148,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/a\/active\/","url_meta":{"origin":193485,"position":1},"title":":active","date":"September 6, 2011","format":false,"excerpt":"The :active pseudo selector changes the appearance of a link while it is being activated (being clicked on or otherwise activated). It's usually only seen for a split second, and provides visual feedback that the element was indeed clicked. It's most typically used on anchor links (<a href=\"#\"><\/a>). For instance,\u2026","rel":"","context":"With 28 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":376849,"url":"https:\/\/css-tricks.com\/wordpress-global-styles-reference-tables\/","url_meta":{"origin":193485,"position":2},"title":"WordPress Global Styles Reference Tables","date":"January 31, 2023","format":false,"excerpt":"We\u2019ve covered a lot of ground in this series. So much so that I thought it would be helpful to condense all the various block theme settings and styles from theme.json into a single page right here.","rel":"","context":"In \"json\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/guide-wordpress-block-theme-css.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3303,"url":"https:\/\/css-tricks.com\/snippets\/css\/link-pseudo-classes-in-order\/","url_meta":{"origin":193485,"position":3},"title":"Link Pseudo-Classes (In Order)","date":"August 10, 2009","format":false,"excerpt":"a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:focus { outline: 1px solid blue; } a:active { color: yellow ;} Link, Visited, Hover, ActiveL, V, H, ALoVe, HAte That's missing the \"Focus\" state though, so maybe try thinking: \"Lord Vader Hates Fluffy Animals\"","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":251511,"url":"https:\/\/css-tricks.com\/snippets\/sass\/caching-current-selector-sass\/","url_meta":{"origin":193485,"position":4},"title":"Caching the Current Selector (&#038;) in Sass","date":"February 14, 2017","format":false,"excerpt":"The & character in Sass is unique in that it represents the current selector. It changes as you nest. Let's say you are nested, but you want access to a selector back up the nesting a bit. The trick is to cache & and use it deeper in the nesting.\u2026","rel":"","context":"In \"bem\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14200,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/h\/hover\/","url_meta":{"origin":193485,"position":5},"title":":hover","date":"September 6, 2011","format":false,"excerpt":"The\u00a0:hover\u00a0pseudo class in CSS selects elements when the mouse cursor is current over them. It\u2019s commonly associated with link (<a>) elements. a:hover { color: green; text-decoration: underline overline; } So when a link like this is \u201chovered\u201d (like with a cursor on a device with a mouse): <a href=\"https:\/\/google.com\">Go to\u2026","rel":"","context":"In \"hover\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/193485"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=193485"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/193485\/revisions"}],"predecessor-version":[{"id":193486,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/193485\/revisions\/193486"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/191187"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=193485"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=193485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}