К содержанию

Combining Selectors in SASS

Sometimes we need nested constructs to be connected together when compiling, not separated by a space. To do this, we need to put an ampersand before the name of the nested selector:

styles.scssdiv {
  &.block {
    width: 300px;
  }
}

As a result, after compilation we will get the following code:

styles.cssdiv.block {
  width: 300px;
}

Задание 1

Tell me what the result of compiling the following code will be:

styles.scss#block {
  &.xxx {
    width: 300px;
  }
}

Задание 2

Tell me what the result of compiling the following code will be:

styles.scss#block {
  .xxx {
    width: 300px;
  }
}

Задание 3

Tell me what the result of compiling the following code will be:

styles.scss#block {
  &.xxx {
    &.zzz {
      width: 300px;
    }
  }
}

Задание 4

Tell me what the result of compiling the following code will be:

styles.scss#block {
  &.xxx {
    .zzz {
      width: 300px;
    }
  }
}

Задание 5

Tell me what the result of compiling the following code will be:

styles.scss#block {
  .xxx {
    &.zzz {
      width: 300px;
    }
  }
}