What is the difference between ampersand and double ampersand in Less?

Question

I am trying to write Less in the context of React.

The following code works:

.rt-tr-group .rt-tr:hover .rt-td {
    color: #fff;

    &:first-child { /* notice single ampersand */
        border-left: 2px solid #007aff;
    }
}

This code also works:

.rt-tr-group .rt-tr:hover .rt-td {
    color: #fff;
}
.rt-tr-group .rt-tr:hover .rt-td:first-child {
    border-left: 2px solid #007aff;
}

However, the following code does not work:

.rt-tr-group .rt-tr:hover .rt-td {
    color: #fff;

    &&:first-child { /* notice double ampersand */
        border-left: 2px solid #007aff;
    }
}

I have seen the double ampersand used elsewhere in the codebase, so && does something. Could someone please explain the difference to me?

Are you certain that the rest of the codebase is SASS and not LESS? https://stackoverflow.com/questions/19228089/double-ampersand-in-less — Turnip, Mar 04 '19 at 17:39
Turnip you are right, it is probably LESS. Thank you for pointing this out and for the link. This must be why I couldn't find anything googling. — Jennifer Goncalves, Mar 04 '19 at 17:42
http://lesscss.org/features/#parent-selectors-feature-multiple- — seven-phases-max, Mar 04 '19 at 18:19

Jon Uleis · Answer 1 · 2019-03-04T17:52:47.433

2

The double ampersand you've seen might be & + & or & ~ &, not &&, as to the best of my knowledge the latter does nothing in Sass.

Using & + & will allow you to target an adjacent sibling of the same selector, for example this SCSS:

.btn {
  ...
  & + & {
    margin-left: 15px;
    background: firebrick;
  }
}

...will compile to this CSS:

.btn {
  ...
}
.btn + .btn {
  margin-left: 15px;
  background: firebrick;
}

Read more about the double ampersand here at Team Treehouse.

edited Mar 04 '19 at 17:52

answered Mar 04 '19 at 17:38

Jon Uleis

17,693
2
33
42

1

As another user pointed out, I am using LESS and not SASS. Thank you for your answer, though. I read through the article and it make a lot of sense. – Jennifer Goncalves Mar 04 '19 at 18:00

score 1 · Answer 2 · answered Mar 04 '19 at 17:46

1

&& is redundant to the basic logical operator AND in nearly every popular programming language, while the single & is used specifically in SASS for connecting CSS selectors.

Connecting, or to be more precise in the use case of SASS: Concatenating selectors is very different from combining two conditionals in a logical sense.

Read further: https://www.sitepoint.com/sass-basics-operators/ and https://javascript.info/logical-operators

answered Mar 04 '19 at 17:46

Arne Spremberg

21
4

As another user pointed out, I am using LESS and not SASS, so I updated my question. Thanks for your answer. – Jennifer Goncalves Mar 04 '19 at 18:01

score 1 · Answer 3 · answered Mar 04 '19 at 17:48

1

It could be to increase specificity: .thing.thing is higher than just .thing

answered Mar 04 '19 at 17:48

Mike

251
1
6

I removed important as it is not relevant to this code. Thanks for your answer. – Jennifer Goncalves Mar 04 '19 at 18:00
Ok, great! If that's the case I'm certain that `&&` is intended to make the rule stronger. I've used this myself, especially when you need to override third party styles. – Mike Mar 05 '19 at 19:03

What is the difference between ampersand and double ampersand in Less?

3 Answers3