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

Question

I am a newbie to CSS and SCSS.

In the following code,

.title {
    width: 718px;
    &.sub-title {
      width: 938px;
   }
}

W

Answer 1

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:

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

  ...
    
 
  ...