Can you help me Interpreting `&` in Sass code?

Question

This is DOM applying Sass.

<i className={`contract-icon ic-${this.props.value}`} />

This is Sass file.

.contract-icon {
    &.ic-rise_fall {
        &:before {
            content: url('../images/trading_app/contracts/rise_fall.svg');
        }
        &--invert:before { # What's this?
            content: url('../images/trading_app/contracts/invert/rise_fall.svg');
        }
    }
    .other-class {
        padding-right: 8px;
    }
    ...

Based on my research,

& is combine/ join with this selector if the current element has the accompanying class applied.
- (My Guess) So I thought we can build DOMs like this way: <div class="contract-icon> <div class="ic-rise_fall"> -> But this is not right. Why is it wrong? How does it make a difference from .contract-icon class?
(Bonus Question) What is --invert:before?

& means both classes are being applied on the same div(element) — Nandita Sharma, May 24 '18 at 05:22
Possible duplicate of [What does '&.' in '&.sub-title' indicates in scss?](https://stackoverflow.com/questions/9988558/what-does-in-sub-title-indicates-in-scss) — Ashil John, May 24 '18 at 05:48

choz · Answer 1 · 2018-05-24T05:51:33.600

3

& is to reference the parent selector.

It's really easy to understand what it does. You can say it's like to append the parent selector. Or, think of it this way.

So let's say you want to apply multiple styles to .container, which its standard css is:

.container.success,
.container.success.but-stupid,
.container.successful,
.container > div.error,
.container ~ div.stupid,
.container-----_happy-sass

And in SASS, you can do it like,

.container { /* this is 1 */
    &.success { 
        &.but-stupid { /* this is 2 */ }
        &ful { /* this is 3 */  }
    }

    & > div.error { /* this is 4 */ }

    & ~ div.stupid { /* this is 5 */ }

    &-----_happy-sass { /* this is 6 */ }
}

Or, in your case above,

.contract-icon {
    &.ic-rise_fall {  /* EQUALS TO .contract-icon.ic-rise_fall */
        &:before { /* EQUALS TO .contract-icon.ic-rise_fall:before; */
            /*declarations*/
        }
        &--invert:before { /* EQUALS TO .contract-icon.ic-rise_fall--invert */
            /*declarations*/
        }
    }

    .other-class { /* EQUALS TO .contract-icon .other-class */
        /*declarations*/
    }
}

edited May 24 '18 at 05:51

answered May 24 '18 at 05:25

choz

17,242
4
53
73

What about `.other-class` in `contact-icon`? – merry-go-round May 24 '18 at 05:36
1

@JohnBaek It equals to `.contract-icon.other-class`. Please check the updated answer. – choz May 24 '18 at 05:40
Nop, it is equal to `.contract-icon .other-class` – Abin Thaha May 24 '18 at 05:50
Thanks for your contribution @choz. I'm very sorry that I can choose only one answer. Your explanation is clear and I'm sure it will be helpful for Stackoverflow community. I voted up your answer. – merry-go-round May 24 '18 at 05:51
1

@JohnBaek Sure, I just hope this helps. – choz May 24 '18 at 05:52
It helped! Thanks – merry-go-round May 24 '18 at 05:52

Abin Thaha · Accepted Answer · 2018-05-24T05:45:10.573

With this line, you are actually applying two classes to the i, which are contract-icon and ic-{something} (In the example it is ic-rise_fall).

As you said & is used to combine the class names. Means:-

&.ic-rise_fall {
    &--invert:before { # What's this?
        content: url('../images/trading_app/contracts/invert/rise_fall.svg');
    }
}

This will be converted into

&.ic-rise_fall--invert:before {
    content: url('../images/trading_app/contracts/invert/rise_fall.svg');
}

in css.

So basically, the code

.contract-icon {
    &.ic-rise_fall {
        &:before {
            content: url('../images/trading_app/contracts/rise_fall.svg');
        }
        &--invert:before { # What's this?
            content: url('../images/trading_app/contracts/invert/rise_fall.svg');
        }
    }
    .other-class {
        padding-right: 8px;
    }
}

will be converted into

.contract-icon.ic-rise_fall:before {
    content: url('../images/trading_app/contracts/rise_fall.svg');
}
.contract-icon.ic-rise_fall--invert:before {
    content: url('../images/trading_app/contracts/invert/rise_fall.svg');
}
.contract-icon .other-class {
    padding-right: 8px;
}

Like this.

This ic-{something} is being passed as props from the parent, so, it can be either ic-rise_fall or ic-rise_fall--invert. So we are just handling the possibilities of using SASS here.

<span class='contract-icon ic-rise_fall'>
   <i class='other-class'></i>
</span>

Consider this as the case where you applied the other-class and ic-rise_fall

Just edited my answer too. Find your answer and feel free to clear your doubts. — Abin Thaha, May 24 '18 at 05:38
So why is it putting `&` before `ic-rise-_fall`? It works same as `other-class though`. — merry-go-round, May 24 '18 at 05:42
I am sorry, I missed a space between `.contract-icon .other-class` before. Check again — Abin Thaha, May 24 '18 at 05:45

score 2 · Answer 3 · answered May 24 '18 at 05:45

You can say the "&" is the upper parent. for example,

This is the SASS with &.

.contract-icon {
    &.ic-rise_fall {
        &:before {
            content: url('../images/trading_app/contracts/rise_fall.svg');
        }
        &--invert:before { # What's this?
            content: ''
    }
  }
}

this is the compiled CSS of &. It will select the selector which are same level

.contract-icon.ic-rise_fall:before {
  content: url("../images/trading_app/contracts/rise_fall.svg");
}
.contract-icon.ic-rise_fall--invert:before {
  content: "";
}

This is the SASS without &.

   .contract-icon {
      .ic-rise_fall {
            &:before {
                content: url('../images/trading_app/contracts/rise_fall.svg');
            }
      }
    }

The compiled CSS without &. It will select child element

 .contract-icon .ic-rise_fall:before {
  content: url("../images/trading_app/contracts/rise_fall.svg");
}

It helps to directly attach the parent selector

Can you help me Interpreting `&` in Sass code?

3 Answers3