What Does '&.' in '&.Sub-Title' Indicates in SCSS

What does '&.' in '&.sub-title' indicates in scss?

The & concatenates the parent class, resulting in .title.sub-title (rather than .title .sub-title if the & is omitted).

The result is that with the & it matches an element with both title and sub-title classes:

<div class='title sub-title'></div> <!-- << match -->

whilst without the & it would match a descendent with class sub-title of an element with class title:

<div class='title'>
  ...
    <div class='sub-title'></div> <!-- << match -->
  ...
</div>

What does the '&' selector select?

I believe the ampersand is a Sass feature. From the docs:

Referencing Parent Selectors: &

Sometimes it’s useful to use a nested rule’s parent selector in other
ways than the default. For instance, you might want to have special
styles for when that selector is hovered over or for when the body
element has a certain class. In these cases, you can explicitly
specify where the parent selector should be inserted using the &
character.

What does the & mean in an scss selector?

The & is a placeholder for the parent selector:

.parent {
  & > ul {
    color: red
  }
}

Is the same like

.parent > ul {
  color: red
}

A common use case are pseudo classes, e.g.:

.link {
  &:hover {
    color: red
  }
}

A nice explanation with examples can be found on CSS Tricks.

What does an & before a pseudo element in CSS mean?

That's LESS, not CSS.

This syntax allows you to nest selector modifiers.

.clearfix { 
  &:before {
    content: '';
  }
}

Will compile to:

.clearfix:before {
  content: '';
}

With the &, the nested selectors compile to .clearfix:before.

Without it, they compile to .clearfix :before.

How to understand the &-sign in Less/SCSS?

You should think about the & sign simply replacing it with the current parent selector.

This means:

.container {

    &-white {
        background: white;
    }
}

becomes

.container-white {
    background: white;
}

or:

.container {
    display: flex;
    &:after {
         content: ' ';
         background: black;
    }
}

becomes:

 .container {
      display: flex;
 }
 .container:after {
      contente: ' ';
      background: black;
 }

EDIT:
Regarding your example:

.container {
    display: flex;

    &-footer {
        display: flex;
        margin: 24px 0 8px 8px;

        .CancelButton {
            margin: 0;
        }
    }
 }

The margin on the CancelButton class will be applied only if there will be something like:

<div class="container-footer">
    <button class="CancelButton" />
</div>

(please consider not to use CamelCase for css! Also take a look at the BEM naming convention)

What does &- mean in &-link in the below code?

This:

.btn{
   &-link {
      background-color: $white;
      color: $orange;
   }
}

Will be compiled into:

.btn-link {
   background-color: $white;
   color: $orange;
}

Reference: https://css-tricks.com/the-sass-ampersand/#modifying-the-ampersand

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

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

MUI - Styling text inside ListItemText

I beleive the only way to achieve this right now is to use the 'disableTypography' prop of the ListItemText element.

 <ListItemText
        disableTypography
        primary={<Typography type="body2" style={{ color: '#FFFFFF' }}>MyTitle</Typography>}
      />

This lets you embed your own text element with whatever styling you want on it.

---

Related Topics