Escrevendo CSS LTR / RTL inteligente com SASS

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.