Less.js: :Erste-Kind-Pseudoklasse funktioniert nicht mit Extend

Erstellt am 11. Feb. 2016  ·  7Kommentare  ·  Quelle: less/less.js

Ich verwende folgenden Code:

header {
    &:extend(.menu all);
}

In der less-Datei habe ich folgende Struktur:

.menu {// CODE}
.menu:after {// CODE}
.menu:first-child {// CODE}
.menu:last-child {// CODE}

In der Ausgabedatei ist das CSS für .menu und . Menü: nach dem Erscheinen. Aber NICHT der Code für . Menü: erstes Kind oder . Menü: Letztes Kind.

Wenn ich jedoch ändere. Menü: erstes Kind oder . Menü:letztes Kind bis . Menü: zuerst und . menu:zuletzt wird der CSS-Code angezeigt.

Der Bindestrich scheint das Problem zu sein.

Irgendeine Idee, wie man das beheben kann?

Danke.

consider closing needs info

Alle 7 Kommentare

Ich kann Ihr Ergebnis nicht bestätigen: Demo .
Aus Ihrer Frage bei SO kann ich sehen, dass Sie gulp-less , aber da ich mich nicht wirklich an eine Less-Version (ab 1.4.x) erinnern kann, die einen solchen Fehler aufweist, ist es höchstwahrscheinlich kein Art von "nicht zuletzt weniger oder schlucklose Version" Problem. Die Frage ist also: Sind Sie sicher, dass dies das Snippet ist, mit dem das Problem auftritt (vielleicht ist es etwas komplexer?) und/oder könnte es eine andere gulp Aufgabe sein, die möglicherweise stört?

Vielleicht ist es eine Schluckaufgabe. Werde mir das morgen oder Anfang nächster Woche anschauen. Danke.

Vielleicht dies kann helfen.

Wird wegen Inaktivität geschlossen (scheint sowieso kein weniger Problem zu sein).

@seven-phases-max Ich glaube, dass der oben bereitgestellte Code dieses Problem genau reproduziert.

weniger

.col {
  float: left;

  &:last-child {
    margin-right: 0;
  }
  &:first-child {
    margin-left: 0;
  }
}

.generate-columns(<strong i="9">@n</strong>, <strong i="10">@i</strong>: 1) when (<strong i="11">@i</strong> =< @n) {
  .col-@{i}:extend(.col) {
    margin-left: (@i)px;
  }

  .generate-columns(<strong i="12">@n</strong>, (<strong i="13">@i</strong> + 1));
}

.generate-columns(2);

generierte CSS-Datei

.col,
.col-1,
.col-2 {
  float: left;
}
.col:last-child {
  margin-right: 0;
}
.col:first-child {
  margin-left: 0;
}
.col-1 {
  margin-left: 1 px;
}
.col-2 {
  margin-left: 2 px;
}

erwartete CSS:

.col,
.col-1,
.col-2 {
  float: left;
}
.col:last-child {
  margin-right: 0;
}
.col:first-child {
  margin-left: 0;
}
.col-1 {
  margin-left: 1 px;
}
.col-1:last-child {
  margin-right: 0;
}
.col-1:first-child {
  margin-left: 0;
}
.col-2 {
  margin-left: 2 px;
}
.col-2:last-child {
  margin-right: 0;
}
.col-2:first-child {
  margin-left: 0;
}

Fehlendes Teil

.col-1:last-child {
  margin-right: 0;
}
.col-1:first-child {
  margin-left: 0;
}
.col-2:last-child {
  margin-right: 0;
}
.col-2:first-child {
  margin-left: 0;
}

@ivan-nikitovic Nein, siehe den Unterschied zwischen extend und extend all .

@seven-phases-max das hat Sinn. :-) Danke für den Hinweis.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

awebdev picture awebdev  ·  4Kommentare

BrianMulhall picture BrianMulhall  ·  4Kommentare

chricken picture chricken  ·  6Kommentare

renoth picture renoth  ·  6Kommentare

bassjobsen picture bassjobsen  ·  6Kommentare