score:6

Accepted answer

& is basically using to denote the parent in a nested sass/scss.

aggrid = {
    '& .ag-theme-material': {
        margintop: '2rem'
}

will be converted as

aggrid .ag-theme-material {
    margin-top: 2rem
}

into css

or in another example using scss

.wrapper {
    &:before, &:after {
        display: none;
    }
}

will be converted into

.wrapper::before {
    display: none;
}
.wrapper::after {
    display: none;
}

score:8

& is used to reference selector of the parent rule.

const styles = {
  container: {
    padding: 20,
    '&:hover': {
      background: 'blue'
    },
    // add a global .clear class to the container.
    '&.clear': {
      clear: 'both'
    },
    // reference a global .button scoped to the container.
    '& .button': {
      background: 'red'
    },
    // use multiple container refs in one selector
    '&.selected, &.active': {
      border: '1px solid red'
    }
  }
}

compiles to:

.container-3775999496 {
  padding: 20px;
}
.container-3775999496:hover {
  background: blue;
}
.container-3775999496.clear {
  clear: both;
}
.container-3775999496 .button {
  background: red;
}
.container-3775999496.selected, .container-3775999496.active {
  border: 1px solid red;
}

find out more over here - http://cssinjs.org/jss-nested?v=v6.0.1


Related Query

More Query from same tag