К содержанию

Combinación de selectores en SASS

A veces necesitamos que, al compilar estructuras anidadas, estas se unan de forma continua y no con un espacio. Para ello, es necesario colocar un ampersand antes del nombre del selector anidado:

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

Como resultado, después de la compilación obtendremos el siguiente código:

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

Задание 1

Explica cuál será el resultado de la compilación del siguiente código:

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

Задание 2

Explica cuál será el resultado de la compilación del siguiente código:

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

Задание 3

Explica cuál será el resultado de la compilación del siguiente código:

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

Задание 4

Explica cuál será el resultado de la compilación del siguiente código:

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

Задание 5

Explica cuál será el resultado de la compilación del siguiente código:

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