Wsparcie od prawej do lewej (RTL) w projekcie SASS

Question

Zastanawiam się, czy możliwe jest utworzenie miksu, który obsługuje wiele argumentów jako właściwości, które powinny zostać przekonwertowane na rtl. chcę zrobić coś podobnego

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

z wstawek:

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

} 

Chyba powinienem analizowania @content, ale to nie działa (nieprawidłowy CSS po”... H $ Obiekt w. ":, że ekspresja (przykład 1 piksel pogrubienie), jest" @content {)

teraz uchwyt rtl 2 vars:

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

, które zmieniam, gdy jest to rtl. Używam go w plikach sass, takich jak:

margin-#{$dir}: 15px; 

Ale nie sądzę, że to rozwiązanie jest wystarczająco elastyczne. I nie chcę też włączać oddzielnego mixin na css.

Ktoś ma lepszy pomysł lub rozwiązanie? Wszelkie opinie mile widziane

Answer 1

Co powiedzie się na coś takiego, jak @mixin z opcjonalnymi parametrami do użycia z dowolnym selektorem CSS.

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

Teraz powiedzmy masz selektora CSS o nazwie „mySelector” i chcesz tylko zmienić wyściółkę i szerokość ...

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

Answer 2

nie

takie samo podejście, ale bi-app-sass rozwiąże problem rtl i wygeneruje on 2 różne arkusze stylów dla ciebie

po utworzeniu potrzebnych plików (wyjaśnione w powyższym linku), wszystko, co musisz zrobić, to wywołanie predefiniowanego mixin dla właściwości left/right (Float, granicy, margines, wyściółka, text-align ...)

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

istnieją również port tego projektu za mniej języku

• bi-app-less

---

Aktualizacja

w bi-app-sass istnieją rtl & ltr wstawek warunkowe, które są przydatne do obsługi specjalnych przypadków, patrz poniższy przykład

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

pamiętać, że ta funkcja nie jest obsługiwana w bi-app-less

Answer 3

Poniższy importu SCSS dodaje kilka użytecznych zmiennych, funkcje i mixins.

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

Proponuję użyć pojedynczego wstawek, które mogą z łatwością obsługiwać zarówno przypadki wew. zagnieżdżone selektory:

_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'; 

ten generuje plik bez RTL.

Dla dalszego sprawdzania informacji =>https://github.com/davidecantoni/sass-rtl-mixin