К содержанию

Combinarea selectorilor în SASS

Uneori avem nevoie ca, la compilarea construcțiilor imbricate, acestea să se unească nu prin spațiu, ci direct. Pentru aceasta, înaintea numelui selectorului imbricat este necesar să punem ampersand:

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

Ca rezultat, după compilare vom obține următorul cod:

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

Задание 1

Spuneți care va fi rezultatul compilării următorului cod:

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

Задание 2

Spuneți care va fi rezultatul compilării următorului cod:

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

Задание 3

Spuneți care va fi rezultatul compilării următorului cod:

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

Задание 4

Spuneți care va fi rezultatul compilării următorului cod:

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

Задание 5

Spuneți care va fi rezultatul compilării următorului cod:

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