К содержанию

Verkettung von Selektoren in SASS

Manchmal müssen wir, dass bei der Kompilierung von verschachtelten Konstrukten diese nicht durch ein Leerzeichen verbunden werden, sondern direkt aneinandergrenzen. Dafür muss vor dem Namen des verschachtelten Selektors ein kaufmännisches Und-Zeichen gesetzt werden:

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

Als Ergebnis erhalten wir nach der Kompilierung den folgenden Code:

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

Задание 1

Erklärt, wie das Ergebnis der Kompilierung des folgenden Codes aussehen wird:

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

Задание 2

Erklärt, wie das Ergebnis der Kompilierung des folgenden Codes aussehen wird:

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

Задание 3

Erklärt, wie das Ergebnis der Kompilierung des folgenden Codes aussehen wird:

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

Задание 4

Erklärt, wie das Ergebnis der Kompilierung des folgenden Codes aussehen wird:

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

Задание 5

Erklärt, wie das Ergebnis der Kompilierung des folgenden Codes aussehen wird:

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