Sass Tip: The Double Ampersand Selector - Treehouse Blog

Sass Tip: The Double Ampersand Selector - Treehouse Blog Learn to code. Start your free trial with Treehouse. Home Subscribe Free trial Learn Sass Tip: The Double Ampersand Selector Guil Hernandez writes on December 25, 2013 104 0 18 12 Share with your friends Your Name Your Email Recipient Email Enter a Message I read this article and found it very interesting, thought it might be something for you. The article is called Sass Tip: The Double Ampersand Selector and is located at http://blog.teamtreehouse.com/sass-tip-double-ampersand-selector. Captcha Submit In Sass, the ampersand (&) symbol is used to reference the parent selector in a nested rule. For example, the following targets .btn on :hover: .btn { ... &:hover { background: dodgerblue; } } We can also place the & after a selector to reverse the nesting order: .btn { ... .navbar & { background: lightsteelblue; } } This outputs a descendant selector that targets a .btn element inside .navbar: .btn { ... } .navbar .btn { background: lightsteelblue; } We can take this concept a step further with an adjacent sibling combinator. Adjacent Sibling Selector The adjacent sibling combinator (+) is used to target an element’s immediate sibling. For instance: .heading + .intro { ... } This targets any intro class immediately following an element with the class heading. Let’s take a look at two useful ways we can use this combinator with the & selector. Adjacent Buttons Let’s say we have a button group consisting of a primary and a secondary action button, both have the class btn. <div class="btn-group"> <a class="btn" href="#">Primary Action</a> <a class="btn" href="#">Secondary Action</a> </div> The secondary action button needs to be a different color and have a left margin to separate it from its sibling. We can use the following rule to reference btn, then target its immediate sibling with the same class: .btn { ... & + & { margin-left: 15px; background: firebrick; } } If two btn classes are adjacent siblings, the second one will get the firebrick background and left margin. Here’s the CSS output: .btn { ... } .btn + .btn { margin-left: 15px; background: firebrick; } See CodePen Demo Columns The adjacent & selector also helps with column layout. To create a row where all but the first column have a left margin (or gutter), we can write the following: .col { ... & + & { margin-left: 30px; } } The first column will remain flush with the left side of the page, while the others get a roomy left margin. See CodePen Demo As we just learned, the “double ampersand” sibling selector is a handy solution that keeps us from writing extra CSS and classes in our markup. Methods like these are some of the many ways Sass helps us write cleaner, more efficient front-end code. To learn more about Sass, check out our new Treehouse course on Sass basics . code css double ampersand learn programming make a website parent selectors sass 7 Responses to “Sass Tip: The Double Ampersand Selector” Martin on August 21, 2016 at 10:06 pm said: This is awesome, I just found it and you have saved me some extra work already! love it! Reply 銆愰€佹枡鐒℃枡銆慡alvatore Ferragamo(銈点儷銉淬偂銉堛兗銉兓銉曘偋銉┿偓銉?鈼嗐兇銈°儵銉儨銉?way銉忋兂銉?銈淬兗銉儔*銉偠銉?銉淬偅銉炽儐銉笺偢 /K05208/銆愪唬寮曘亶鎵嬫暟鏂欑 on January 22, 2016 at 11:57 pm said: Wow, wonderful blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your site is excellent, as well as the content! Reply Dallas Designs on January 2, 2014 at 5:18 am said: Awesome articles you posted here i am so inspired here keep it continue. Thanks Reply Rabnally on April 20, 2016 at 1:50 pm said: Awesome….yeah 🙂 Reply Christopher Dell'Olio on December 30, 2013 at 9:45 am said: I am becoming very fond of Treehouse articles. Love staying up to date on the modern web technology! 🙂 Reply Alex on December 25, 2013 at 11:36 pm said: Sass 3.3 is coming, all this stuff will be even more awesome! 😀 https://gist.github.com/luzlol/7940531 Reply matthew carleton on December 29, 2013 at 7:56 pm said: Hey this is fantastic. Ordinarily I would apply the margin to all and then remove with first-child, this is better with less code! Thanks. Reply Leave a Reply Click here to cancel reply. Name * Email Address (will not be published) * Website Want to learn more about CSS? Learn how CSS allows you to apply visual styling to HTML elements with colors, fonts, layouts, and more. Learn more Stay current Sign up for our newsletter, and we'll send you news and tutorials on web design, coding, business, and more! ©2016 Treehouse Island, Inc. About • Careers • Blog • Affiliate Program • Terms • Privacy • Press Kit • Contact Stay current Sign up for our newsletter, and we'll send you news and tutorials on web design, coding, business, and more!