К содержанию

Verkettung von Selektoren in LESS

Manchmal benötigen wir, dass sich beim Kompilieren von verschachtelten Konstruktionen diese nicht durch ein Leerzeichen, sondern direkt verbinden. Dazu muss vor dem Namen des verschachtelten Selektors ein kaufmännisches Und gesetzt werden:

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

Als Ergebnis erhalten wir nach der Kompilierung den folgenden Code:

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

Задание 1

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

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

Задание 2

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

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

Задание 3

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

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

Задание 4

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

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

Задание 5

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

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