К содержанию

Combinação de seletores em SASS

Às vezes, precisamos que, durante a compilação de estruturas aninhadas, elas sejam combinadas de forma concatenada, e não com um espaço. Para isso, é necessário colocar um e comercial antes do nome do seletor aninhado:

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

Como resultado, após a compilação, obteremos o seguinte código:

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

Задание 1

Explique qual será o resultado da compilação do seguinte código:

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

Задание 2

Explique qual será o resultado da compilação do seguinte código:

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

Задание 3

Explique qual será o resultado da compilação do seguinte código:

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

Задание 4

Explique qual será o resultado da compilação do seguinte código:

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

Задание 5

Explique qual será o resultado da compilação do seguinte código:

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