Less.js: CSS3-Funktion calc() funktioniert nicht mit LESS

Erstellt am 8. Okt. 2012 · 51Kommentare · Quelle: less/less.js

Ich weiß, dass es bereits gemeldet wurde, aber Fehler wurden aufgrund unzureichender Informationen geschlossen.

Ich habe folgenden CSS-Code:

#id1 {
    position: fixed;
    left: 0; top: 0;
    width: 130px;
}
#id2 {
    position: fixed;
    right: 0; top: 0;
    width: calc(100% - 130px);
}

Ich wollte es mit 130px als Parameter in LESS umwandeln, aber calc wird von LESS interpretiert und das:

<strong i="11">@id1width</strong>: 130px
#id1 {
    position: fixed;
    left: 0; top: 0;
    width: @id1width;
}
#id2 {
    position: fixed;
    right: 0; top: 0;
    width: calc(100% - @id1width);
}

macht die vorletzte Zeile zu width: calc(-30%); was eindeutig nicht erwünscht ist. Ich habe versucht, width: ~"calc(100% - @id1width)"; aber @id1width nicht interpretiert.

Ich denke, LESS sollte keine Dinge verwenden, die von CSS3 für den internen Gebrauch reserviert sind ...

Quelle

mgol

👍13 ❤2 😄2

Hilfreichster Kommentar

Sie wurden wahrscheinlich als Duplikate geschlossen

Problemumgehung: width: ~"calc(100% - @{id1width})"; - Beachten Sie die geschweiften Klammern um die Variable.

Wir wechseln zu einem System, bei dem nur Dinge innerhalb von Klammern ausgewertet werden, um dieses Problem zu beheben.

lukeapage am 8. Okt. 2012

👍51 🎉11 ❤6 😄5

Alle 51 Kommentare

Sie wurden wahrscheinlich als Duplikate geschlossen

Problemumgehung: width: ~"calc(100% - @{id1width})"; - Beachten Sie die geschweiften Klammern um die Variable.

Wir wechseln zu einem System, bei dem nur Dinge innerhalb von Klammern ausgewertet werden, um dieses Problem zu beheben.

lukeapage am 8. Okt. 2012

👍51 🎉11 ❤6 😄5

:+1:

shankarcabus am 18. Dez. 2012

<strong i="5">@rows</strong>: 10;

<strong i="6">@row1</strong>: 1 / <strong i="7">@rows</strong> * 100%;

.featured1
{
  top: ~'-webkit-calc(@{row1} + 20px)';
  right: 0;
  bottom: @row5;
  left: @col9;
}

Dieses Bit von LESS verarbeitet den Wert von ' @row1 ' zu 10%, was großartig ist. Aber wenn es sich in einem mit Escapezeichen versehenen Abschnitt von LESS befindet und in geschweifte Linien eingeschlossen ist, um die Variable LESS beizubehalten, gibt es '10' ohne '%' zurück.

Ich habe eine Problemumgehung gefunden, die mich noch nicht im Stich gelassen hat. Wenn Sie ein weiteres '%' nach dem schließenden Curly der 'row1'-Variablen in den Escape-Code einfügen, funktioniert es korrekt ...

~'-webkit-calc(@{row1}% + 20px)';

Aber es scheint ein ziemlicher Hack zu sein, einen anderen Einheitentyp hinzuzufügen, der bereits in der Variablen enthalten sein soll.

jonjohnjohnson am 19. Dez. 2012

@jonjohnjohnson dies ist im Kopf fixiert und wird in 1.3.2 sein

der Rest dieses Fehlers wird in 1.4.0 behoben

lukeapage am 19. Dez. 2012

Ich bin mir nicht sicher, ob dies das gleiche Problem ist, aber ich habe ein Problem mit folgendem. Beachten Sie, dass es hier keine weniger spezifischen Dinge gibt, abgesehen davon, dass 1.3.3 ansonsten gültiges CSS munget.

Hier ist das CSS

html, body {
    margin:0, padding:0, border:0;
    height: 100%;
}

#content {
    height: -webkit-calc(100% - 40px);
    height: calc(100% - 40px);
    background-color:gray;
}

#footer {
    background-color:black;
}

Und hier ist der HTML-Code, um ihn einzufügen

<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet/less" type="text/css" href="test.css" />
<script src="less-1.3.3.min.js"></script>
<body>
<div id="content"></div>
<div id="footer" style="height:40px"></div>
</body>
</html>

"content" wird auf eine Höhe von 60% gesetzt, also wird der Calc-Ausdruck weniger geparst und falsch aufgelöst, als ihn unverändert an den Browser weiterzugeben. Getestet in Safari 6.0.2 und Firefox.

faceless2 am 14. Jan. 2013

Fix auf Master für 1.4.0

lukeapage am 2. Feb. 2013

height: ~"calc(100% - 50px)";

produziert noch:

height: calc(50%);

Für mich. Ich möchte:

height: calc(100% - 50px);

OliverJAsh am 3. Juni 2014

Darüber hinaus wird immer noch height: calc(50%); selbst wenn die strikte Mathematik auf on .

OliverJAsh am 3. Juni 2014

@OliverJAsh Ich kann Ihre Ergebnisse mit Less 1.7.0 nicht reproduzieren (sowohl --strict-math:on funktionieren wie erwartet) ... Könnten Sie bitte weitere Details zu dem Compiler / der Umgebung / den Skripten angeben, die Sie verwenden? (Nur für den Fall, dass es ein Bootstrap-Build-Skriptproblem gab, das zu solchen falschen Ergebnissen führen könnte: https://github.com/twbs/bootstrap/issues/13604, ist dies vielleicht auch bei Ihnen der Fall?).

seven-phases-max am 3. Juni 2014

Ich hatte dieses Problem in 1.6.3 (aus irgendeinem Grund kotzt WinLESS beim Kompilieren, wenn ich auf 1.7.x aktualisiere, also bleibe ich vorerst bei 1.6.x)

Mein Quickfix bestand nur darin, einem Teil der Gleichung zu entkommen:

height: calc(~"100%" - unit(<strong i="7">@var</strong>, px));

Dies funktioniert sogar für Variablen wie <strong i="10">@var</strong>: 50 . Oder Sie könnten der ganzen Berechnung wie calc(~"100% - 50px"); entgehen

twiginteractive am 26. Juli 2014

👍5

@twiginteractive Wenn Sie Escaping mit der Option --strict-math off (Standardeinstellung) verwenden müssen, ist dies kein Problem, sondern ein erwartetes Verhalten. Siehe --strict-math .

seven-phases-max am 26. Juli 2014

👍1

@seven-phases-max Hmmm - laut den Dokumenten, mit SM aus (Standard), dann _sollte_ richtig geparst (dh unberührt)
height: calc(100% - 10px);

Aber das tut es nicht. Das Ausgabe-CSS ist height: calc(90%); , was nicht das gewünschte Ergebnis ist. Vielleicht ist dies in 1.7 behoben, aber wie gesagt, ich kann diese Version im Moment nicht verwenden, bis ich herausgefunden habe, was die WinLESS-Kompilierung kaputt macht.

(Es sei denn, ich lese die Dokumente falsch, wenn es heißt "wird korrekt verarbeitet" ... LESS konnte den Wert von 100% nicht kennen, daher sollte es keine mathematische Berechnung für '100% - 10px' durchführen)

twiginteractive am 26. Juli 2014

@twiginteraktiv

laut den docs, mit SM off (default) sollte dies korrekt geparst werden (dh unberührt)

Nein, das Wort dort ist currently nicht correctly (dh "wird derzeit verarbeitet").

seven-phases-max am 26. Juli 2014

@seven-phases-max Ah - mein Fehler, es macht jetzt Sinn. Danke für die Klarstellung.

twiginteractive am 27. Juli 2014

Höhe: ~"calc(100% - 50px)"; Hat bei mir funktioniert.

aamirshahzad am 5. Sept. 2014

👍18 🎉5

~~Hier beginnt Less.js mit Ihrem Code herumzuspielen.~~

height: _calc(50%);
height: calc(100% - 50%); /* browser-native */

stevenvachon am 5. Sept. 2014

@stevenvachon

Angeblich hat v2.0 die Möglichkeit, seine Funktionen wie folgt voranzustellen:

Dies hat keinerlei Auswirkungen auf calc . Es gibt keine eingebaute calc Funktion, Less wertet lediglich einen mathematischen Ausdruck entsprechend seinen (Less-)Regeln aus. Das ist es. Wenn Sie dieses "Durcheinander" nicht wollen, verwenden Sie --strict-math .

seven-phases-max am 5. Sept. 2014

Ps die Lösung für dieses Problem ist strenge Mathematik. Und vielleicht sollten wir
Strenge Mathematik aktivieren, wenn Sie Calc aufrufen?

lukeapage am 5. Sept. 2014

~~Das Problem erweitert sich, wenn Myth after Less verwendet wird.~~

stevenvachon am 5. Sept. 2014

Wieso den? Entfernt Mythos Klammern? Strenge Mathematik macht weniger zu einer richtigen Obermenge
von css.

lukeapage am 5. Sept. 2014

Und vielleicht sollten wir bei einem Aufruf zu Calc strenge Mathematik erzwingen?

Wir haben dies in Nr. 1872 besprochen und es gibt einige Argumente gegen "local strict- math:on " Workarounds. Die vorgeschlagene Lösung (noch nicht ganz entschieden) ist in #1880.

seven-phases-max am 5. Sept. 2014

@stevenvachon

Auch bei strictMath müssen wir ~"calc(...)" eingeben, damit Less es ignoriert.

Beispiel? Dh ein Snippet, in dem Less einen Ausdruck in calc mit --strict-math=on schraubt.

seven-phases-max am 5. Sept. 2014

Seit wann funktioniert das Präfix v2? Haben wir das entschieden und ich habe es vergessen?

lukeapage am 6. Sept. 2014

Seit wann funktioniert das Präfix v2? Haben wir das entschieden und ich habe es vergessen?

Nein. Ich denke, das wurde nur leicht überschätzt https://github.com/less/less.js/issues/2102#issuecomment -50286985.

seven-phases-max am 6. Sept. 2014

Ja, tut mir leid, nicht "die Option zu", sondern "die Möglichkeit, ein Plugin zu schreiben, das die Option bietet". ~~Ich muss nochmal Code mit und ohne ~"" auf calc() testen.~~ Ich muss mich vor einiger Zeit geirrt haben und habe mit diesem Missverständnis einfach weitergemacht. Ich habe einen älteren Code, den ich jetzt ändern muss.

stevenvachon am 6. Sept. 2014

Mir ist aufgefallen, dass mit calc etwas Seltsames passiert, wenn es in Verbindung mit width . Ich habe alles in einen Codepen gepackt, um es einfacher zu machen: http://codepen.io/anon/pen/OVpJvP

alenb am 2. Juni 2015

@alenb

Was ist da seltsam? Der Code in Ihrem Codepen wird wie erwartet kompiliert...

seven-phases-max am 2. Juni 2015

@sieben-phasen-max

Es ist kompiliert, aber es ist nicht das, was erwartet wird. Überprüfen Sie den CSS-Code etwas genauer.

Es ist seltsam, weil es ganz rechts noch eine Lücke hat, obwohl es sich mit den 3 Spalten vollständig ausdehnen sollte. Die ersten beiden Spalten sollten 33,33 % minus 20 Pixel betragen, wobei die letzte Spalte 33,33 % beträgt. Die ersten 2 Spalten hätten ein Padding-Recht von 20px, aber dies wird nicht reflektiert, da ganz rechts offensichtlich eine Lücke vorhanden ist.

Ich habe gestern Abend mehr damit gespielt und Margin-Right statt des Padding-Right macht den Trick und behebt das Problem.

alenb am 3. Juni 2015

@alenb

Es ist kompiliert, aber es ist nicht das, was erwartet wird. Überprüfen Sie den CSS-Code etwas genauer.

Klar, habe ich. Wenn Sie also etwas anderes erwarten - bitte angeben.

Die ersten 2 Spalten hätten ein Padding-Recht von 20px, was aber nicht widergespiegelt wird

padding hat keinen Einfluss auf die Breite (es sei denn, Sie legen [ box-sizing ](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing )), consult [CSS specs](http://www.w3.org/TR/REC-CSS2/box.html). So you simply get : (33% - 20px) + (33% - 20px) + 33% = 99% - 40px -> 40px' Lücke wie erwartet.

In jedem Fall bezieht sich dies ausschließlich auf CSS und hat nichts damit zu tun, wie Less calc kompiliert. Klicken Sie im Codepen-Code auf die Schaltfläche "Kompilierte anzeigen" und dort sehen Sie, dass Ihre calc Anweisungen von Less genau so kompiliert wurden, wie Sie es angegeben haben).

seven-phases-max am 3. Juni 2015

@sieben-phasen-max

Ich hätte gedacht, dass der Codepen dies offensichtlich machen würde, aber überhaupt kein Problem.

Danke für die Information!

alenb am 3. Juni 2015

Heute funktioniert es immer noch nicht mit der Standardinstallation von less (mit npm).

Ich musste verwenden:
min-height: ~"calc(100% - 262px)"; //calc(100% - 262px);

Ich weiß nicht, ob es normal ist, da der Fehler als "geschlossen" markiert ist, wollte es Ihnen aber nur mitteilen.

rkyoku am 8. Apr. 2016

👍1

@RenaudParis --strict-math

seven-phases-max am 8. Apr. 2016

Okay das werde ich versuchen, danke! Aber wäre es nicht besser, dass es vorbei ist
Ursprünglich? Denn es ist ziemlich überraschend, wenn man davon nichts weiß
Parameter.

Danke trotzdem!

Le ven. 8 av. 2016 à 20:48, Max Mikhailov [email protected] a
schreiben:

@RenaudParis https://github.com/RenaudParis --strict-math
http://lesscss.org/usage/#command -line-usage-strict-math
—
Sie erhalten dies, weil Sie erwähnt wurden.
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHub an
https://github.com/less/less.js/issues/974#issuecomment -207553212

rkyoku am 8. Apr. 2016

Aber wäre es nicht besser, dass es standardmäßig ist?

Wenn Sie es als Standard festlegen, werden viele vorhandene Less-Codebasen zerstört. Einmal (bei ~ v1.4.0 ) gab es einen Versuch, es tatsächlich zum Standard zu machen, aber dann wurde es wegen der alten Abwärtskompatibilität umgekehrt ... Eine neuere, weniger aufdringliche Methode wurde bei #1880 entwickelt (aber es ist noch nicht implementiert).

seven-phases-max am 9. Apr. 2016

Okay, danke, dass du dir die Zeit genommen hast, es mir zu erklären Max!

Le sam. 9 av. 2016 13:46, Max Mikhailov [email protected] a
schreiben:

Aber wäre es nicht besser, dass es vorbei ist
Ursprünglich?
Wenn Sie es als Standard festlegen, werden viele vorhandene Less-Codebasen zerstört. Wenn
(bei ~v1.4.0) gab es einen Versuch, es zum Standard zu machen, aber
dann ist es wegen der alten Abwärtskompatibilität umgekehrt... Ein neueres,
weniger aufdringliche Methode wurde bei #1880 entwickelt
https://github.com/less/less.js/issues/1880 (aber nicht implementiert
noch)).
—
Sie erhalten dies, weil Sie erwähnt wurden.
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHub an
https://github.com/less/less.js/issues/974#issuecomment -207776654

rkyoku am 9. Apr. 2016

Ich habe das gelöst:

.calc(<strong i="6">@prop</strong>, @val) {
    @{prop}: ~"calc(~'@{val}')";
    @{prop}: ~"-moz-calc(~'@{val}')";
    @{prop}: ~"-webkit-calc(~'@{val}')";
    @{prop}: ~"-o-calc(~'@{val}');"
}
.calc(width, "80% - 36px");

Wenn ich command line , ist es richtig. Nur less-loader ist nicht korrekt. Also habe ich diese Lösung auf stackoverflow gefunden

Ich kopiere es in meinen Code, leider ist es auch nicht richtig. Also habe ich etwas modifiziert. Es klappt!

Leider ist die Befehlszeile nicht korrekt!!😂 😂 😂

mqliutie am 1. Sept. 2016

Nicht sicher, warum dieses Problem geschlossen ist. Es macht keinen Sinn, dass Less ein natives CSS-Verhalten ändert.

vincentmorneau am 3. Nov. 2016

... Weniger würde ein natives CSS-Verhalten ändern.

Es würde nicht. Legen Sie einfach --strict-math=on (standardmäßig nicht aktiviert wegen der Kompatibilität mit einer riesigen Anzahl von Less-Projekten, abhängig von --strict-math=off , plus ein paar Überlegungen, die unter #1880 erwähnt wurden).

seven-phases-max am 4. Nov. 2016

👍1

In einem UIkit 3- Theme verwende ich dies in my_theme.less :

height: ~"calc(100vh - 20px)";

Und es funktioniert.

oshihirii am 6. Aug. 2017

👍4 😕1

Bei mir hat es beim Schreiben in *.less-Datei funktioniert https://github.com/less/less.js/issues/974#issuecomment -9229470

Danke @lukeapage ! 🥇

quytm2239 am 16. Okt. 2017

Hallo @mqliutie, danke, dass calc hinzugefügt

das mixin sollte sein

.calc(<strong i="8">@prop</strong>, @val) {
    @{prop}: ~"-webkit-calc('@{val}')";
    @{prop}: ~"-moz-calc('@{val}')";
    @{prop}: ~"calc('@{val}')";
}

Geben Sie wie folgt ein:
.calc(Breite, "100% - 60px");

Ausgabe wie folgt:
Breite: Calc(100% - 60px);

ciaranlp am 19. Okt. 2017

Warum ist dieses Thema geschlossen?! Es ist nicht fest.

Ich bekomme immer noch calc(30%) wenn ich calc(50% - 20px) schreibe. Das ist nie das, was jemand will. Abgesehen davon, dass es falsch ist , blind mit verschiedenen Einheiten zu rechnen, sollte es in einem calc() so belassen werden, wie es ist, es sei denn, es kann mit 100%iger Zuverlässigkeit berechnet werden (zB gleiche Einheiten). Ich verwende weniger 2.7.3.

Bitte öffnen Sie dieses Problem erneut.

thany am 25. Jan. 2018

👍1

@thany
Beziehen Sie sich auf diese Kommentare, sie beschreiben, dass dies nicht gerade ein Problem ist, da die Standardeinstellung für die Verarbeitung von Mathematik ein Nebenprodukt der Geschichte ist und Sie die Standardeinstellung jederzeit ändern können.
https://github.com/less/less.js/issues/974#issuecomment -207553212
https://github.com/less/less.js/issues/974#issuecomment -207776654

jonjohnjohnson am 25. Jan. 2018

@jonjohnjohnson Das ist nur das Problem noch einmal. Wenn der strikte Modus dies behebt (noch nicht ausprobiert, sollte nicht erforderlich sein, um alle Arten von nicht standardmäßigen Flags zu aktivieren, um Fehler zu umgehen), sollte er standardmäßig aktiviert sein.

Egal wie Sie es ausdrücken, dieses Problem ist durch keine Definition behoben.

thany am 26. Jan. 2018

@thany Ich habe nur versucht, Ihnen zu helfen, zu verstehen, dass die Entwickler entschieden haben, dass dies ihrer Meinung nach kein Problem ist. Diese Kommentare geben nicht nur das Problem wieder, sie beschreiben die Haltung der Entwickler zu diesem Problem. Viel Glück.

jonjohnjohnson am 26. Jan. 2018

@thany

dann sollte es standardmäßig eingeschaltet sein.

Es kann nicht sein, weil dies sofort zig Millionen Projekte da draußen zerstören würde. Wenn Sie also das Standardverhalten als Problem behandeln, setzen Sie einfach die dokumentierte Option und fertig. Nach jeder Definition.

Warum ist dieses Thema geschlossen?!

Denn die aktuelle Diskussion zur Verbesserung des Standardverhaltens ist hier .

seven-phases-max am 26. Jan. 2018

@thany Wie @seven-phases-max, wenn Sie dies gelöst sehen möchten, tragen Sie zu #1880 bei. Ich denke, die Lösung ist da, aber es gab nicht genügend Community-Gegengewicht, um zu einer umsetzungsreifen Entscheidung zu kommen. Es ist ein langer Faden, aber genau das braucht die Lösungsfindung: Vorschläge prüfen und auf die eine oder andere Weise abwägen. Und dann: jemand, der die Arbeit für die Umsetzung übernimmt.

matthew-dean am 27. Jan. 2018

 width: 15%;
 height: ~"calc(width)";

wie man Höhe = Breite macht

xiaomizhou66 am 18. Nov. 2018

👍1

@xiaomizhou66
Das hat weder mit LESS noch mit diesem Thema zu tun. Es ist eine reine CSS-Frage. Bitte suchen Sie nach etwas wie "css keep aspekt" und Sie werden einige Antworten finden.

thany am 26. Nov. 2018

Das ist also noch kaputt. calc(100vh - 138px) kommt auf -38px.

willatathena am 15. März 2019

@willatathena

Wenn dieses Problem mit Less 3.x auftritt, erstellen Sie bitte einen separaten Fehlerbericht.
Für frühere Less-Versionen ist dies standardmäßig das erwartete Verhalten (lesen Sie die obigen Beiträge, um zu erfahren, wie Sie damit umgehen).

seven-phases-max am 16. März 2019

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

Less.js: CSS3-Funktion calc() funktioniert nicht mit LESS

Hilfreichster Kommentar

Alle 51 Kommentare

Verwandte Themen