less.js carga lazy sheet

Me pregunto si hay una forma de cargar una sola hoja less en algún momento después de cargar una página. This question tiene una respuesta que explica cómo volver a cargar todas las hojas, pero para mi caso de uso las hojas existentes nunca tienen dependencias en las hojas recién cargadas, y sería bueno simplemente agregar la hoja perezosamente. Estoy pensando algo así comoless.js carga lazy sheet

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

podría representar una posible API? Saludos,

Colin

ACTUALIZACIÓN 3 ª Dic 2010:

he intentado salir del arreglo de la base de código de Livingston less.js Samuel, y mientras se hace el trabajo, no parece reconocer en las definiciones ya cargado hojas de estilo. Aquí están mis archivos de muestra

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; 
    } 
}

Así que la segunda hoja de estilo hace la carga con pereza, pero tiene el error siguiente análisis en style2.less

".rounded está definido"

.rounded se define style.less , y como no he descargado esa hoja, estaba pensando que debería estar disponible para el compilador en el entorno actual.

Dicho de otra manera, no queremos comenzar de cero o descargar definiciones existentes, sino construir sobre los estilos ya cargados. Gracias,

Colin

Fuente

2010-07-08 hawkett

Como referencia para los demás: less = http://lesscss.org/ – Orbling

-2

Todo lo que tiene que hacer es añadir una nueva etiqueta de secuencia de comandos para el DOM. Luego será descargado y ejecutado.

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; 
}

Esto es lo que uso en mi sitio pero lo llamo al analizar. Para que lo use como un cargador lento, debería funcionar bien para que lo llame onload o de una manera similar.

Fuente

2010-11-26 02:22:13 Youarefunny

Lo siento, pensé que era lo que llamaste tu archivo javascript :( – Youarefunny

¿Todavía no entiendo lo que quieres hacer? ¿Quieres agregar una hoja de estilo (ya sea una hoja de estilo less.js) al DOM después de la carga de la página? – Youarefunny

1. Carga de la página completa, 2. El usuario hace algunas cosas, y en algún momento en el futuro hace clic en un enlace que requiere una nueva hoja de estilo cargado. Un buen ejemplo podría ser la instalación de un componente de widget de ui.No queremos volver a cargar toda la página, solo los html y css necesarios para el widget. – hawkett

less.js tiene una función loadStyleSheet en su alcance local que se puede utilizar para cargar dinámicamente y analizar los estilos menos (carga diferida).

El único problema es que la función está en el cierre creado para definir less.js, por lo que no puede acceder a la función desde su código.

Tal vez se puede exponer extendiendo la API.

Actualización:

He creado una versión bifurcada de less.js @https://github.com/livingston/less.js

El uso de esta versión se puede cargar cualquier hoja de estilo utilizando el método less.less.loadStyleSheet(YOUR_FILE_URL, CALLBACK)

También he hecho una solicitud de extracción a la biblioteca real, es de esperar que acepten mis cambios.

Fuente

2010-12-02 12:26:09

Lo probé y parece funcionar, pero las definiciones en las hojas de estilo ya cargadas no se reconocen. Actualizará la pregunta con más detalles. Aclamaciones. – hawkett

O bien, podría escribir algún código del lado del servidor que convierta su hoja de estilos .less en .css sobre la marcha. Del cliente lo cargarías perezosamente como si fuera cualquier otra hoja de estilo .css. Este es el enfoque utilizado por http://www.dotlesscss.org/ aunque podría usarse con cualquier sabor de .less.

Tal vez no sea lo que está buscando, pero es una opción para algunos, creo.

Fuente

2010-12-05 21:14:11

Sí, def. una opción: mi aplicación está en App Engine (python) y los scripts de estilo son aportados por el usuario en tiempo de ejecución, así que mis únicas opciones para la compilación del servidor son (a) una biblioteca de Python (no puedo encontrar nada que parezca bien mantenido, actual, o es probable que siga menos avance de manera confiable). (b) Un servicio web externo que acepta los scripts de origen y devuelve el resultado compilado. (c) elija algo diferente a LESS que tenga un compilador python. Ninguna de estas opciones es muy atractiva, y la facilidad con la que less.js resuelve estos problemas (si se puede cargar de forma lenta) es muy atractiva. Gracias. – hawkett

La otra cosa es que, debido a que necesito una carga diferida, necesito que las piezas estén disponibles/compiladas por separado, p. userA puede usar solo script1, mientras que userB puede usar script1 y script2 (script2 no se puede usar solo, ya que depende de script1, pero script2 no puede ser utilizado por todos). Por lo tanto, cuando se carga script2, si se ha precompilado en el servidor, el archivo css contendrá todas las definiciones en el script1 ya cargado. Es cierto que simplemente anularán, pero innecesariamente grandes archivos CSS y huele bastante mal en general. – hawkett

No pude resolver esto con las explicaciones anteriores así que proporcionaré las mías.

Primero. Cargue en su hoja de estilo Less después de que se cargue la página. Algo como esto:

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

Genial. Ahora seleccione su hoja de estilo y empújela en la colección de hojas que Less.js ya tiene. Espera un objeto DOM así que utilicé un selector jQuery.

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

Si alguien conoce una mejor manera de hacerlo, por favor, enséñame. (Tuve que agregar el [0] para llevarlo al correcto). Si hace esto en la consola, devolverá un número. Ese número es cuántas hojas menos conoce, así que con suerte devolvió un número uno más alto de lo que ya tenía en la carga de la página.

La siguiente parte es fácil. Le dices a Less.js que vuelva a cargar todas sus hojas menos buenas, esto incluye la hoja que acabas de agregar a su pila.

less.refresh();

Y listo. Eso debería haber cargado dinámicamente una hoja de estilo y le dijo a Less que la compilara. Espero que esto ayude.

Fuente

2012-03-09 17:46:05 MSaforrian

se acaba de aprobar respuesta MatthewForr para mis propias necesidades:

$.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();

Fuente

2012-11-15 18:07:39 sunrize531

Puede utilizar esta biblioteca ligera a lazy load less/css and js files (exención de responsabilidad: yo soy el autor).

Esto es tan simple como:

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

También puede recibir una devolución de llamada, la carga de algunos activos más con dependencias y toma cuidado acerca de caché.

Fuente

2014-07-06 10:17:11

Respuesta

Cuestiones relacionadas