Existem várias maneiras de converter seu site em RTL. Converter manualmente o arquivo, usando plug-ins, scripts, etc., ou – escrever código inteligente . Não quero dizer que seu código pensará por você, apenas que um código criará dois arquivos para você, que são gerenciáveis, de manutenção e fáceis de olhar.

O que você precisa saber antes de começarmos.

Este post é sobre como criar código no SASS que irá compilar seu CSS para LTR e RTL ao mesmo tempo.
Farei o possível para deixar isso claro, mas o conhecimento básico do SASS tornará isso mais fácil de entender.
Não vou explicar como instalar o SASS ou como fazê-lo funcionar para você. Você pode ler isso aqui .

Por último: todas as convenções de nomenclatura apresentadas aqui são apenas sugestões.

Primeiro, vamos falar de arquitetura

Existem duas maneiras de carregar seus arquivos CSS:

1. Um arquivo dedicado a todos os estilos (LTR) e um arquivo com sobrescrições específicas para RTL.

   <link type = “stylesheet” src = “style-ltr.css”>
   <link type = “stylesheet” src = “style-rtl.css”>

2. Um único arquivo para cada direção, contendo todo o CSS, com diferenças por direção.

   <link type = “stylesheet” src = “style-rtl.css”>

A seguir – configuração básica

Você precisará configurar dois arquivos SCSS principais: e .style-ltr.scssstyle-rtl.scss

//style-ltr.scss
@charset "UTF-8";

$text-direction: ltr !default;
/* Partials */
@import 'partials/_navigation';
@import 'partials/_main';
...

e só precisamos usar 3 linhas:style-rtl.scss

//style-rtl.scss
@charset "UTF-8";

$text-direction: rtl;
@import 'style-ltr';

Quando o inspetor SASS compilar os arquivos em CSS, ele os compilará automaticamente. agora, em seus parciais, tudo que você precisa fazer é construir suas regras como você normalmente faria, com uma condição simples onde você tem LTR / RTL. As regras comuns devem estar fora dos colchetes if / else:if/else

.class {
    width: 10em;
    color: #00ccff;
    @if $text-direction == ltr {
        text-align:left;
    } @else {
        text-align:right;
    }
}

Isso produzirá duas versões da mesma regra (nos arquivos LTR e RTL mencionados anteriormente):

//LTR
.class {
    width:10em;
    color: #00ccff;
    text-align:left;
}

e

//RTL
.class {
    width:10em;
    color: #00ccff;
    text-align:right;
}

Isso é tudo que há para fazer.

Isso torna seu código muito gerenciável, cada regra está em um lugar e não há necessidade de procurá-la em dois lugares para fazer alterações ou manter dois arquivos diferentes a todo momento.