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

CssSass

Css Problem Overview

I am a newbie to CSS and SCSS.

In the following code,

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

What does &. means? Is it same as nesting class?

Css Solutions

Solution 1 - Css

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>
Categories
Recommended Css Solutions
Recommended Sass Solutions

Previous Solution:

Variable subtraction in django templates

DjangoDjango Templates

Next Solution:

Javascript toFixed Not Rounding

Javascript

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionnkmView Question on Stackoverflow
Solution 1 - CssBenjieView Answer on Stackoverflow