less.js chargement feuille paresseux

Je me demande s'il existe un moyen de charger une seule feuille less après un chargement de page. This question a une réponse qui explique comment recharger toutes les feuilles, mais pour mon cas d'utilisation les feuilles existantes n'ont jamais de dépendances sur les feuilles nouvellement chargées, et il serait bon d'ajouter simplement la feuille paresseusement. Je pense quelque chose commeless.js chargement feuille paresseux

less.sheets.push(mySheet); 
less.loadStyleSheet(mySheet);

peut représenter une API possible? Cheers,

Colin

Mise à jour le 3 décembre 2010:

J'ai essayé la solution de Livingston Samuel de la base de code de less.js, et alors qu'il fonctionne, il ne semble pas reconnaître les définitions dans feuilles de style déjà chargées. Voici mes exemples de fichiers

a. index.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Simple</title> 

    <link rel="stylesheet/less" href="/static/less/style.less" id="abc123"/> 
    <script src="/static/js/less-1.0.40.js"></script> 
</head> 
<body> 
    <div id="container"> 
    <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> 
    </div> 
    <div id="abc"><div>Bingo</div></div> 
</body> 

<script> 
console.log("loading new sheet"); 
less.loadStyleSheet("/static/less/style2.less", function() { 
    console.log("Loaded!"); 
}); 

console.log("called"); 

</script> 
</html>

b. style.less

@primary_color: green; 

.rounded(@radius: 5px) { 
    -moz-border-radius: @radius; 
    -webkit-border-radius: @radius; 
    border-radius: @radius; 
} 

#container { 
    background: @primary_color; 
    .rounded(5px); 

    div { 
    color: red; 
    } 
}

c. style2.less

#abc { 
    background: @primary_color; 
    .rounded(10px); 

    div { 
    margin: 2px; 
    color: blue; 
    } 
}

Ainsi, la seconde feuille de style ne se charge paresseusement, mais il a l'erreur d'analyse suivante dans style2.less

".rounded est indéfini"

.rounded est défini style.less , et puisque je n'ai pas déchargé cette feuille, je pensais qu'elle devrait toujours être disponible pour le compilateur dans l'environnement actuel.

Pour le dire autrement, nous ne voulons pas commencer à nouveau, ou à décharger des définitions existantes, mais construire sur les styles déjà chargés. Merci,

Colin

Source

2010-07-08 hawkett

Pour référence pour d'autres: moins = http://lesscss.org/ – Orbling

-2

Tout ce que vous devez faire est d'ajouter une nouvelle balise de script pour les DOM. Il sera ensuite téléchargé et exécuté.

function addScript (id, url) // Adds scripts to the DOM 
{ 
    var s = document.createElement('script'); 
    s.id = id; 
    if (url) s.src=url; 
    s.type='text/javascript'; 

    document.getElementsByTagName('head')[0].appendChild(s) 
    return s; 
}

Ce que j'utilise sur mon site, mais je l'appelle sur parse. Pour vous de l'utiliser comme un chargeur paresseux, il devrait fonctionner correctement pour vous de l'appeler onload ou d'une manière similaire.

Source

2010-11-26 02:22:13 Youarefunny

Désolé, je pensais que c'était ce que vous avez nommé votre fichier javascript :( – Youarefunny

Je ne comprends pas ce que vous voulez faire? Voulez-vous ajouter une feuille de style (que ce soit une feuille de style less.js) au DOM après le chargement de la page? – Youarefunny

1. Le chargement de la page est terminé, 2. L'utilisateur fait des choses, et à un moment donné, clique sur un lien qui nécessite une nouvelle feuille de style Un bon exemple pourrait être l'installation d'un composant widget ui.Nous ne voulons pas recharger toute la page, juste le html et le css requis pour le widget. – hawkett

less.js a une fonction loadStyleSheet dans sa portée locale qui peut être utilisée pour charger dynamiquement et analyser les moins styles (charge paresseux).

Le seul problème est la fonction est dans la fermeture créée pour définir less.js de sorte que vous ne pouvez pas accéder à la fonction à partir de votre code.

Peut-être qu'il peut être exposé en prolongeant l'API.

Mise à jour:

J'ai créé une version fourchue de less.js @https://github.com/livingston/less.js

En utilisant cette version, vous pouvez charger une feuille de style en utilisant la méthode less.less.loadStyleSheet(YOUR_FILE_URL, CALLBACK)

J'ai aussi fait une tirer la demande à la bibliothèque réelle, j'espère qu'ils acceptent mes changements.

Source

2010-12-02 12:26:09

Je l'ai testé et il semble fonctionner, mais les définitions dans les feuilles de style déjà chargées ne sont pas reconnues. Mettra à jour la question avec plus de détails. À votre santé. – hawkett

Vous pouvez également écrire du code côté serveur qui convertirait votre feuille de style .less en .css à la volée. Du client, vous le chargeriez paresseusement comme s'il s'agissait d'une autre feuille de style .css. C'est l'approche utilisée par http://www.dotlesscss.org/ bien qu'elle puisse être utilisée par n'importe quelle saveur de .less.

Peut-être pas ce que vous cherchez, mais c'est une option pour certains je pense.

Source

2010-12-05 21:14:11

Yep déf. une option - mon application est sur App Engine (python), et les scripts de style sont fournis par l'utilisateur à l'exécution - donc mes seules options pour la compilation côté serveur sont (a) une bibliothèque python (je ne trouve rien qui semble bien entretenu, courant, ou susceptible de suivre moins d'avancement de manière fiable). (b) Un service Web externe qui accepte les scripts source et renvoie la sortie compilée. (c) choisissez quelque chose d'autre que LESS qui a un compilateur python. Aucune de ces options n'est très attrayante, et la facilité avec laquelle less.js résout ces problèmes (si elle peut charger paresseusement) est très attrayante. THX. – hawkett

L'autre chose est que parce que j'ai besoin d'un chargement paresseux, j'ai besoin que les pièces soient séparément disponibles/compilées - par ex. userA peut utiliser uniquement script1, tandis que userB peut utiliser script1 et script2 (script2 ne peut pas être utilisé seul, car il dépend de script1, mais script2 peut ne pas être utilisé par tout le monde). Ainsi, lorsque le script2 est chargé, s'il a été précompilé sur le serveur, le fichier css contiendra toutes les définitions du script1 déjà chargé. Certes, ils vont simplement remplacer, mais inutilement de gros fichiers CSS et sent très mauvais en général. – hawkett

Je n'ai pas été capable de comprendre cela avec les explications ci-dessus, donc je vais fournir le mien.

Alors d'abord. Chargez dans votre feuille de style Moins après le chargement de la page. Quelque chose comme ceci:

$('head').append('<link rel="stylesheet/less" href="path/to/yourDynamicStyles.less" />');

Grand. Maintenant, sélectionnez votre feuille de style et insérez-la dans la collection de feuilles que Less.js a déjà. Il attend un objet DOM, j'ai donc utilisé un sélecteur jQuery.

less.sheets.push($('link[href="path/to/yourDynamicStyles.less"]')[0]);

Si quelqu'un connaît une meilleure façon de le faire s'il vous plaît éduquez-moi. (Je devais ajouter le [0] afin de l'obtenir à la bonne.) Si vous faites cela dans la console, il renverra un nombre. Ce nombre est le nombre de feuilles moins connu, alors nous espérons que le nombre de feuilles est supérieur à ce que vous avez déjà eu au chargement de la page.

La partie suivante est facile. Vous dites à Less.js de recharger toutes ses feuilles de qualité inférieure, ceci inclut la feuille que vous venez d'ajouter à sa pile.

less.refresh();

Et voilà. Cela aurait dû charger dynamiquement une feuille de style et dire à Less de la compiler. J'espère que cela t'aides.

Source

2012-03-09 17:46:05 MSaforrian

vient d'être adopté pour répondre MatthewForr mes propres besoins:

$.each(['/css/style1.less', '/css/style2.less'], function (index, fileName) { 
    var $sheet = $('<link />', { 
     href: fileName, 
     rel: 'stylesheet/less', 
     type: 'text/css' 
    }).appendTo('head'); 
    less.sheets.push($sheet[0]); 
}); 
less.refresh();

Source

2012-11-15 18:07:39 sunrize531

Vous pouvez utiliser cette bibliothèque légère à lazy load less/css and js files (disclaimer: je suis l'auteur).

C'est aussi simple que:

lazy.load('/static/less/style.less');

Il peut également recevoir un rappel, charger des plus actifs avec dépendances et prend soin de cache.

Source

2014-07-06 10:17:11

less.js chargement feuille paresseux

Répondre

Questions connexes