2012-02-11 11 views
11

Intro:¿Puedo usar los parámetros de la url en LESS css?

Estoy intentando salir menos en un entorno asp.net mvc.

Utilizo dotless para el procesamiento del lado del servidor (y no me gustaría usar el procesamiento del lado del cliente, especialmente después de la publicación del proyecto completo).

Tengo que aplicar un diseño donde hay diferentes combinaciones de colores dependiendo de diferentes cosas (por ejemplo, la hora del día).

Menos sentido, muy poderoso en este caso, como el diseño de un CSS parametrizado y solo cambiar como 10 variables al principio del archivo para cada tema fue realmente edificante.

Problema:

Pero yo tendría que cambiar de alguna manera los temas de color de un parámetro exterior.

Ideas:

principio pensé que un parámetro de URL como style.less tema = fucsia sería bueno, pero no he encontrado ninguna manera de analizar algo como esto?.

Luego pensé que hacer un muy corto blue.less, green.less, orange.less que consistiera solo en las variables de color declaradas, e incluir el main.less en cada una de ellas sería una solución sólida.

No tuve oportunidad de probar la segunda solución, pero pensé que sería un buen momento para pedir consejo sobre la manera más robusta de hacerlo.

El problema nuevamente es: quiero controlar algunas cosas en mi archivo menos desde el exterior.

Respuesta

22

Sí, puede (porque implementé esa función exactamente por ese motivo).

Dotless admite parámetros desde el exterior a través del parámetro querystring.

<link rel="stylesheet" href="style.less?foo=bar" /> 

le permitirá utilizar los siguientes inferior: Código de inyección

@foo = bar; 

El parámetro es muy simple. simplemente antepone las declaraciones de variables a su archivo normal menos, por lo que todo lo que venga como un parámetro querystring seguirá la sintaxis anterior.

El código en cuestión es muy simple: https://github.com/dotless/dotless/blob/master/src/dotless.Core/Engine/ParameterDecorator.cs

+1

¡Esta es la respuesta que esperaba! : D – SoonDead

+0

@Tigraine: ¿Cómo es esto? Un atacante podría inyectar fácilmente código malicioso en las hojas de estilo. – jor

+0

Usar esto no es tan sencillo. Tuve que crear un tema '@import '-parámetro-predeterminado.less"; 'sobre mi línea' @import "darkly-variables - @ {theme} .less"; 'que contenía' @theme: dark; 'de lo contrario hay fueron problemas de compilación. –

5

AFAIK, no puede pasar parámetros para dotnetless para usar para compilar.

Como sugerencia, ¿por qué no simplemente llamar a diferentes archivos menos? Esto sería bastante fácil de hacer mediante el uso de una propiedad Viewbag.

Para hacer los diferentes menos, Primero crea un archivo menos con cada conjunto de colores en ellos. Luego, importa tu archivo base css. dotnetless combinará las definiciones de color en el archivo principal con los usos en el archivo base. Entonces usted tiene algo como -

@baseGray: #ddd; 
@baseGrayDark: darken(@baseGray, 15%); 
@baseGrayLight: lighten(@baseGray, 10%); 
@import "baseCss.less"; 

Acabo de probar esto y el proyecto MVC3 y funciona.

+0

Gracias, esto también es algo que necesito. Hay casos en los que aceptaría con gusto más de una respuesta. Este es uno. – SoonDead

Cuestiones relacionadas