Correct usage of &. in SCSS-CodePudding

What is the correct usage of &. in SCSS

In an SCSS file, what is the difference when you are using &. instead of .

.text-field {
  .loading {
    -----
  }
  
  &.error {
    ------
  }
}

CodePudding user response：

If you use

&.error

The css is compiled as:

.text-field.error

While if you do not use & (as in your loading example) the compiled result is:

.text-field .loading

Which means the in the first example you are expecting the error class on the same 'parent' dom element, while in the latter you expect a child inside which is supposed to have the class loading.

So, there is no correct usage, it is a matter of what you want to achieve.

CodePudding user response：

& will join whatever follows it to the parent class.

In your example, it means &.error will evaluate to .text-field.error - styles that will be applied to any elements with both the text-field and error classes.

the .loading class however will evaluate to .text-field .loading - so elements with the loading class that have a parent element with the text-field class.

you can use & without the . as well, for example:

.text-field {
  &--loading {
    // styles
  }
}

will evaluate to a single text-field--loading class.