So verweisen Sie auf eine LESS-Datei, ohne Variablen tatsächlich zu importieren/zu überschreiben

Ich versuche, einige Desktop-Module für eine mobile Version meiner Webseite wiederzuverwenden. Alle module.less Referenzen variables.less - meistens für die IDE (PhpStorm), aber auch um die Abhängigkeiten auf einen Blick zu haben, was ich wirklich mag.So verweisen Sie auf eine LESS-Datei, ohne Variablen tatsächlich zu importieren/zu überschreiben

Bisher dachte ich, diese LESS-Regel referenziert wirklich - eigentlich ist es nicht so. Die Dateien werden wirklich (einmal) eingeschlossen, aber ohne Ausgabe (siehe LESS-Dokumente). Dadurch werden meine mobilen Variablen außer Kraft gesetzt.

├ desktop/ 
│ ├ modules/ 
│ │ └ foobar.less 
│ │  > @import (reference) "../variables.less" 
│ ├ main.less 
│ │ > @import "variables.less" 
│ │ > @import "modules.less" 
│ ├ modules.less 
│ │ > @import "modules/foobar.less" 
│ └ variables.less 
│  > @bundle: 'desktop' 
│ 
└ mobile/ 
    ├ main.less 
    │ > @import "variables.less" 
    │ > @import "modules.less" 
    ├ modules.less 
    │ > @import "../desktop/modules/foobar.less" 
    └ variables.less 
     > @bundle: 'mobile'

Nachdem die mobilen mobile/main.less das Ergebnis der Zusammenstellung ist @bundle'desktop' entspricht.

Gibt es eine Möglichkeit zu nur "Referenz" die Variablen.less? Alle anderen Vorschläge sind willkommen.

Quelle

2016-04-18 Möhre

Hat 'Sie alles enthalten variables.less' * aber * Variablen? Wenn nicht, bist du wahrscheinlich total missverstanden und missbrauchst so '(Referenz)'. Es ist wirklich nichts anderes als ["ohne die importierten * Stile * zu der kompilierten Ausgabe hinzuzufügen"] (http://lesscss.org/features/#import-options-reference). Wenn es um * Variablen * (nicht CSS * Stile *) geht, kommt es auf die [Lazy-Evaluation] (http://lesscss.org/features/#variables-feature-lazy-loading) an Deutsch:. Englisch: www.mplayerhq.hu/DOCS/HTML/en/menc-...d-mpeg4.html Bei einem bestimmten Beispiel reduziert sich dies letztlich auf die Reihenfolge, in der du deine verschiedenen 'variables.less' Dateien importierst und hat nichts mit '(Referenz)' zu tun –

Weitere Informationen zu weniger Variablenlebensdauer, Umfang und überschreiben/Überschreiben finden Sie beispielsweise unter https://github.com/less/less.js/issues/2442#issuecomment-73841148. –

@ Sieben-Phasen-Max ja, wie erwähnt habe ich das tatsächliche Verhalten von 'Referenz' missverstanden. Und ja, meine Datei enthält nur Variablen - eigentlich die gleichen in beiden Paketen, aber an einigen Stellen mit unterschiedlichen Werten. Also wäre Vererbung eigentlich nett. Danke für diesen Github Link. Die Diskussion ist sehr interessant, vor allem mit '& {@import" Paket ";}' –

Schließlich kam ich mit einer sehr einfachen Lösung:

Einfach desktop/variables.less am Anfang mobile/variables.less importieren. Dies funktioniert, weil das Standard-LESS-Verhalten import einmal ist. Da es schon vor allen Modulen importiert wird, die @import Regel Desktop-Modul wird nicht dazu führen (Re-) Import - wird also keine Variablen überschreiben:

├ desktop/ 
│ ├ modules/ 
│ │ └ foobar.less 
│ │  > @import (reference) "../variables.less" 
│ ├ main.less 
│ │ > @import "variables.less" 
│ │ > @import "modules.less" 
│ ├ modules.less 
│ │ > @import "modules/foobar.less" 
│ └ variables.less 
│  > @bundle: 'desktop' 
│ 
└ mobile/ 
    ├ main.less 
    │ > @import "variables.less" 
    │ > @import "modules.less" 
    ├ modules.less 
    │ > @import "../desktop/modules/foobar.less" 
    └ variables.less 
     > @import (reference) "../desktop/variables.less" 
     > @bundle: 'mobile'

Quelle

2016-04-20 13:18:39

So verweisen Sie auf eine LESS-Datei, ohne Variablen tatsächlich zu importieren/zu überschreiben

Antwort

Verwandte Themen