CODEWITHSUNDEEP
sass
Zoltan King
Zoltan King

Reputation: 2282

Do I need to use "&" in this SCSS code or not? With or without it I get the same output

The first one:

.social {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;

  > li > a {
    position: relative;
    display: block;
    width: 26px;
    height: 26px;
    background: #fff;
    border-radius: .1875em;
  }

  > li + li {
    margin-left: .8em;
  }
}

The second one:

.social {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;

  & > li > a {
    position: relative;
    display: block;
    width: 26px;
    height: 26px;
    background: #fff;
    border-radius: .1875em;
  }

  & > li + li {
    margin-left: .8em;
  }
}

The only difference between the two is that the second one uses the ampersand &. The & gets the parent name, however even if I use > li > a as seen in the first code snippet the output will include the parent name .social>li>a as well. Is the first one okay? Just to use it without the ampersand?

Upvotes: 0

Views: 470

Answers (1)

Brebber
Brebber

Reputation: 3084

Exact. In your example both results will be the same. Both examples generates a class construct for child classe which are written with a space between.

The ampersand & is needed to write css for i.e. pseudo classes, when there is no space between:

 // sass
.class {

   color: green;

   &:hover {
      color: red;
   }
}

// result will be without space....
.class {
   color: green;
}

.class:hover {
 color: red;
}

Upvotes: 1

Related Questions