Proprietà CSS dinamiche in MENO?

Question

Sto scrivendo un foglio di stile meno per un sito web bidirezionale e ho bisogno di scrivere un singolo file in meno e produrre due fogli di stile diversi uno per i layout da sinistra a destra (ltr) e l'altro per i layout da destra a lef (RTL)

così quando io sono lo styling per i layout RTL, voglio convertire ogni valore sinistra di essere di destra, appassire è un galleggiante, imbottitura o il margine,

di farlo, ho definito la richiesta variabili nella parte superiore del mio file meno come segue:

@left: right; 
@right: left; 

semplicemente, posso fluttuare gli elementi dinamicamente come s

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

ma il mio problema è che voglio essere in grado anche di utilizzare queste variabili per la produzione di proprietà dinamiche, per esempio quando il posizionamento elementi assolutamente o relativamente, voglio essere in grado di scrivere la proprietà left o right dinamicamente a seconda del valore della variabile @left come segue

position: relative; 
@left: 10px; 

ma questo dà un errore sulla compilazione, qualsiasi idea di come farlo, si noti che ho fatto questo utilizzando SASS, ma fino ad ora non ho potuto farlo lavorare con LESS?

Answer 1

Di seguito è la soluzione che consente di scrivere i propri stili una volta utilizzando LESS, quindi di compilarli come due fogli di stile CSS diversi per i layout rtl e ltr.

fondamentalmente avremo tre file MENO (possono essere più!):

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

in style-ltr.less definire le seguenti variabili:

@left: left; 
@right: right; 

@import "main.less"; 

mentre in style-rtl.less avranno i seguenti valori :

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

@import "main.less"; 

ora in main.less, definiremo le seguenti 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; 
} 

ora tutto quello che dobbiamo fare è quello di includere nelle pagine style-rtl.less RTL includere (o la versione css compilato), così da includere nelle pagine style-ltr.less LTR, e div.something verrà flottato a sinistra nelle pagine ltr, mentre sarà flottato a destra nelle pagine rtl

Nota che è possibile definire padding, margin, border-radius ...etc. utilizzando allo stesso modo qui.

UPDATE

ho creato due progetti su GitHub per aiutare la costruzione di un bi-direzionale applicazioni

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

crediti:

ispirato dal mio caro amicoVictor Zamfir

Answer 2

Aggiornamento: Date un'occhiata a Guardia Espressioni in meno - forse questo può aiutare un po ', è possibile creare istruzioni condizionali po', ma è necessario utilizzare mixins ..

Capisco il suo punto, ma dall'altra mano mi piacerebbe affrontare questo problema in modo diverso. Ecco un'altra ripresa semplificata - si definiscono le variabili per le differenze in entrambi i casi, e quindi importare come si desidera - per esempio, posto in master-litri/master-RTL e importare il resto del foglio di stile dopo:

// 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 forse più efficace: crea un file separato con vars-ltr/rtl, quindi importa nel tuo master-ltr/rtl.

Non sai quanto sia complicato il layout, ma forse questo ti dà qualcosa che puoi usare?

---

Ho provato questo utilizzando String Interpolation ma sembra che le variabili possono essere incorporati solo sul lato "variabile" della definizione. Potrei sbagliarmi qui, forse la gente sa come ottenerlo.

Lo farei un po 'diverso, non perché non è possibile con LESS, ma a causa dell'organizzazione del codice e dell'approccio più generale generico (non è bello nominare qualcosa "lasciato" quando a volte sarà effettivamente " giusto" :)

per il secondo problema con position:relative, ecco il mio prendere:

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

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

Tale soluzione è un pò OK, ma se siete foglio di stile è enorme, si sta andando a finire con un sacco di classi aggiuntive per -ltr e -rtl. In realtà non è un grosso problema ma potresti renderlo ancora più utile allargando l'ambito di -ltr/-rtl ai contenitori genitore (come intestazione/contenuto/barra laterale/piè di pagina) e poi aggiustando da lì. Potrebbero avere molto in comune, come lo sfondo, i colori, la dimensione dei caratteri .. e lavorerai solo sulle differenze nelle loro versioni -ltr/-rtl.

Inoltre, leggere su LESS Namespaces, possono offrire ancora più poteri organizzativi.

Spero che questo aiuti!

Answer 3

Se si utilizza errati privi di punti, c'è qualcosa di più interessante che può essere utilizzato invece di definire un numero finito di mixins qui.

È integrato come plug-in RTL.

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

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

Answer 4

Potete verificare questa libreria: https://github.com/DevelopmentIL/direction.less

Ha grande supporto per molti css-rules. Per esempio:

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

body { 
    .direction(); 
} 

.float { 
    .float(); 
} 

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

uscita sarà:

body { 
    direction: rtl; 
} 

.float { 
    float: right; 
} 

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