¿Propiedades de CSS dinámico en LESS?

Question

Estoy escribiendo una hoja de estilo menos para un sitio web bidireccional, y tengo que escribir un único archivo menos y producir dos hojas de estilo diferentes, una para diseños de izquierda a derecha (ltr) y la otra para diseños de derecha a izquierda (RTL)

así que cuando estoy estilo para los diseños de RTL, Quiero convertir todos los valores de izquierda a estar en lo cierto, se marchitan es un flotador, relleno o margen,

hacerlo, he definido el requerido variables en la parte superior de mi archivo menos de la siguiente manera:

@left: right; 
@right: left; 

simplemente, puedo flotar elementos dinámicamente como thi s

float: @left; // this will be floated to left in ltr layout while it will be right in rtl layout. 

pero mi problema es que quiero ser capaz también de usar estas variables para producir propiedades dinámicas, por ejemplo, cuando el posicionamiento de los elementos en forma absoluta o relativamente, quiero ser capaz de escribir la propiedad left o right dinámicamente dependiendo del valor de la variable de la siguiente manera @left

position: relative; 
@left: 10px; 

pero esto da un error en la compilación, alguna idea de cómo hacerlo, tenga en cuenta que he hecho esto usando SASS, pero hasta ahora no podía conseguirlo para trabajar con MENOS?

Answer 1

A continuación se muestra la solución que le permite escribir sus estilos una vez con LESS, luego compilarlos para que sean dos hojas de estilo css diferentes para diseños rtl y ltr.

básicamente tendremos tres archivos MENOS (pueden ser más):

style-ltr.less // this where we hold the rtl variables 
style-rtl.less // rtl variables 
main.less  // here we'll write our styles 

en style-ltr.less definen las siguientes variables:

@left: left; 
@right: right; 

@import "main.less"; 

mientras que en style-rtl.less tendrán los siguientes valores :

// reflect variables 
@left: right; 
@right: left; 

@import "main.less"; 

ahora en main.less, vamos a definir los siguientes mixins

.left(@distance) when (@left = left) { 
    left: @distance; 
} 
.left(@distance) when (@left = right) { 
    right: @distance; 
} 
.right(@distance) when (@right = right) { 
    right: @distance; 
} 
.right(@distance) when (@right = left) { 
    left: @distance; 
} 

// now we can style our elements using these mixins 
div.something { 
    position: relative; 
    .left(10px); 
    float: @left; 
} 

ahora todo lo que tenemos que hacer es incluir en las páginas style-rtl.less RTL incluir (o la versión compilada css), además de incluir en las páginas style-ltr.less LTR, y div.something se desplazará hacia la izquierda en páginas LTR, mientras que se flotará hacia la derecha en las páginas rtl

Tenga en cuenta que puede definir padding, margin, border-radius ...etc. haciendo lo mismo aquí.

ACTUALIZACIÓN

creé dos proyectos en Github para ayudar a la construcción de una bi-direccional aplicaciones

• bi-app-less
• bi-app-sass

Créditos:

inspirado por mi querido amigoVictor Zamfir

Answer 2

Actualización: Echa un vistazo a la Guardia expresiones en menos - tal vez esto puede ayudar un poco, puede crear declaraciones condicionales un poco, pero hay que usar mixins ..

entiendo su punto, pero por otro De la mano abordaría este problema de manera diferente. Esto es otra toma simplificado - se definen variables para las diferencias en ambos casos, y luego importar como desee - por ejemplo, el lugar en master-LTR/maestro de RTL y de importar el resto de hoja de estilo después:

// master-ltr.less 
// LTR: 
@sidebar-pos-left: 10px; 
@sidebar-pos-right: 0px; 
@content-float: left; 
... 
@import 'styles.less'; 

// your styles.less would have: 
.content { 
    float: @content-float; 
    ... 
} 
.sidebar { 
    position: relative; 
    left: @sidebar-pos-left; 
    right: @sidebar-pos-right; 
    ... 
} 

.. o tal vez más eficaz: cree un archivo separado con vars-ltr/rtl y luego impórtelo en su master-ltr/rtl.

No estoy seguro de qué tan complicado es el diseño, pero quizás esto le da algo que puede usar?

---

He intentado esto utilizando String Interpolation pero parece que las variables sólo pueden ser incrustados en el lado "variable" de la definición. Podría estar equivocado aquí, tal vez la gente sepa cómo lograrlo.

Haría un poco diferente, no porque no fuera posible con LESS, sino por la organización del código y un enfoque general más sensato (no es bueno nombrar algo "a la izquierda" cuando a veces va a ser realmente " derecho" :)

para su segundo problema con position:relative, aquí está mi opinión:

<div class="element element-ltr">...</div> 

.element { 
    position: relative; 
    &.element-ltr { 
    left: @element-side-position; 
    } 
    &.element-rtl { 
    right: @element-side-position; 
    } 
} 

Esa solución es un poco bien, pero si estás hoja de estilo es enorme, que va a terminar con un montón de clases adicionales para -ltr y -rtl. No es realmente un gran problema, pero en realidad podría hacerlo aún más útil al ampliar el alcance del -ltr/-rtl a los contenedores principales (como el encabezado/contenido/barra lateral/pie de página) y luego ajustar desde allí. Pueden tener mucho en común, como fondo, colores, tamaño de fuente ... y solo trabajará en las diferencias en sus versiones -ltr/-rtl.

Además, lea en LESS Namespaces, le pueden ofrecer aún más poderes organizativos.

Espero que esto ayude!

Answer 3

Si está utilizando sin punto, hay algo más interesante que se puede utilizar en lugar de definir un número finito de mixins aquí.

Está incorporado como el complemento RTL.

https://github.com/dotless/dotless/wiki/Plugins

dotless.Compiler.exe -p:Rtl:forceRtlTransform=true,onlyReversePrefixedRules=false file.less 

Answer 4

Puede verificar esta biblioteca: https://github.com/DevelopmentIL/direction.less

Dispone de gran ayuda para muchos CSS-reglas. Por ejemplo:

@direction: rtl; // use `rtl` or `ltr` 
@import "direction.less"; 

body { 
    .direction(); 
} 

.float { 
    .float(); 
} 

.box { 
    display: inline-block; 
    .margin-left(4px); 
    .padding-right(1em); 
} 

salida será:

body { 
    direction: rtl; 
} 

.float { 
    float: right; 
} 

.box { 
    display: inline-block; 
    margin-right: 4px; 
    padding-left: 1em; 
}