81

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?

ROMANIA_engineer
  • 54,432
  • 29
  • 203
  • 199
nkm
  • 5,844
  • 2
  • 24
  • 38

1 Answers1

137

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>
Benjie
  • 7,701
  • 5
  • 29
  • 44
  • 27
    To make it a bit more clear .title.sub-title means elements that have both classes. .title .sub-title means that .subtitle is the descendant of .title – CodeCrack Dec 18 '13 at 00:06