supporto da destra a sinistra (RTL) nel progetto SASS

Question

Mi chiedo se sia possibile creare un mixin che gestisca più argomenti come proprietà da convertire in rtl. voglio fare qualcosa di simile

.css-selector { 
    width: 300px; 
    height: 200px; 
    @include rtl { 
     padding: 10px 5px 3px 4px; 
     margin: 3px 8px 2px 5px; 
    } 
} 

con un mixin:

$rtl = false !default; 

@mixin rtl() { 
    @if $rtl { 
     dir: rtl; 
     @each $property in @content { 
      //check property if it's padding or margin or something 
       else rtl-related... if hit use rtl mixin 
      } 
    } 
    @else { @content; } 

} 

penso che dovrei analizzare il @content, ma non funziona (non valido CSS dopo" ... h $ proprietà in. ": espressione previsto (ad esempio 1px, grassetto), era" @content {)

Ora mi occupo di RTL con 2 Vars:

$dir: left !default; 
$opdir: right !default; 

che cambio quando è rtl. Lo uso nei miei file sass come

margin-#{$dir}: 15px; 

Ma non penso che questa soluzione sia sufficientemente flessibile. E inoltre non voglio includere un mixin separato per proprietà CSS.

Qualcuno ha un'idea o una soluzione migliore? Qualsiasi commento benvenuto

Answer 1

Che dire di qualcosa come un @mixin con parametri opzionali da utilizzare con qualsiasi selettore CSS.

@mixin rtl ($padding:"", $margin:"", $width:"", $height:""){ 
    padding:$padding; 
    margin:$margin; 
    width:$width; 
    height:$height; 
    direction:rtl; 
} 

Ora Diciamo che avere un selettore CSS chiamato "mySelector" e si desidera solo cambiare l'imbottitura e la larghezza ...

.mySelector { 
    @include rtl(5px, "", 50%); 
    font-size:1em; 
    color:#333; 
} 

Answer 2

non

lo stesso approccio, ma bi-app-sass risolverà il problema rtl, e genererà 2 fogli di stile diversi per voi

dopo aver creato i file necessari (spiegato nel link sopra), tutto ciò che dovete fare è chiamare un mixin predefinito per le proprietà sinistra/destra (Float, confine, margine, padding, text-allineare ...)

.foo { 
    @include float(left); 
    @include border-left(1px solid white); 
    @include text-align(right); 
} 

ci sono anche una porta di questo progetto per meno lingua

• bi-app-less

---

Aggiornamento

in bi-app-sass ci sono rtl & ltr mixins condizionali che è utile per gestire casi particolari, vedere il seguente esempio

.something { 
    @include ltr { 
     // anything here will appear in the ltr stylesheet only 
     background-image: url('app-ltr.jpg'); 
    } 
    @include rtl { 
     // for rtl sheet only 
     background-image: url('app-rtl.jpg'); 
     margin-top: -2px; 
    } 
} 

Si noti che questa funzione non è supportata in bi-app-less

Answer 3

Il seguente importazione SCSS aggiunge alcune variabili utili, funzioni e mixin.

View on GitHub

Read more

// Override default value for $dir in directional.scss 
$dir: rtl; 

// Import helpers from directional.scss 
@import "directional"; 

// Use the helpers to make CSS for LTR or RTL 
body { 
    text-align: $left; 
    padding-#{$right}: 1em; 
    margin: dir-values(0 2em 0 1em) if-ltr(!important); 
} 

Answer 4

Vorrei suggerire di utilizzare un unico mixin che può facilmente gestire entrambi i casi incl. selettori nidificate:

_mixin.sass:

$isRLT: true; 

@mixin rtl { 
    @if $isRLT { 
    @if & { 
     & { 
     @content; 
     } 
    } 
    @else { 
     @content; 
    } 
    } 
} 

_main.sass:

.test { 
    float: left; 
    padding: 5px 5px 0px; 

    @include rtl { 
    padding: 5px 0px 0px 5px; 
    } 
} 

core.scss

// include all your libraries 
@import '_mixin'; 
@import '_main'; 

Questo genererà il file senza RTL.

Per ulteriori informazioni di controllo =>https://github.com/davidecantoni/sass-rtl-mixin