22

What does & refer to in an scss selector?


    //Case 1

    .parent {
      & > ul {
        color: red
      }
    }

    //Case 2

    .parent {
      & > ul {
        & > li {
          color: blue;
        }
      } 
    }

    //Case 3

    .parent {
      & > ul {
        & > li {
          color: blue;
          &:hover {
            color: pink
          }
        }
      }
    }
thumbtackthief
  • 6,093
  • 10
  • 41
  • 87
Zhirayr
  • 423
  • 2
  • 6
  • 10

1 Answers1

41

The & is a placeholder for the parent selector:

.parent {
  & > ul {
    color: red
  }
}

Is the same like

.parent > ul {
  color: red
}

A common use case are pseudo classes, e.g.:

.link {
  &:hover {
    color: red
  }
}

A nice explanation with examples can be found on CSS Tricks.

thumbtackthief
  • 6,093
  • 10
  • 41
  • 87
andreas
  • 16,357
  • 12
  • 72
  • 76
  • what about `&-` like `.class-name { &-foo` is it just including the hyphen? – FlavorScape Oct 26 '17 at 20:55
  • 1
    @FlavorScape you could. `But don’t. You’ll never be able to search the project for ‘.class-name-foo’ for one example.` https://medium.com/@MentallyFriendly/scss-and-the-sassy-ampersand-411cc3b0927f – Alex78191 Jan 23 '19 at 11:52