Your guide on how to use and make the most out of RTLCSS
Value directives are placed any where inside the declaration value. They target the containing declaration node.
| Name | Syntax | Description |
|---|---|---|
| Append | /*rtl:append:{value}*/ | Appends {value} to the end of the declaration value. |
| Ignore | /*rtl:ignore*/ | Ignores processing of this declaration. |
| Insert | /*rtl:insert:{value}*/ | Inserts {value} to where the directive is located inside the declaration value. |
| Prepend | /*rtl:prepend:{value}*/ | Prepends {value} to the begining of the declaration value. |
| Replace | /*rtl:{value}*/ | Replaces the declaration value with {value}. |
| Syntax | Description |
|---|---|
/*rtl:append:{value}*/ | Appends {value} to the end of the declaration value. |
.sample {
transform:rotate(45deg) /*rtl:append:scaleX(-1)*/;
}| Syntax | Description |
|---|---|
/*rtl:ignore*/ | Ignores processing of this declaration. |
.code {
direction:ltr/*rtl:ignore*/;
}| Syntax | Description |
|---|---|
/*rtl:insert:{value}*/ | Inserts {value} to where the directive is located inside the declaration value. |
| Syntax | Description |
|---|---|
/*rtl:prepend:{value}*/ | Prepends {value} to the begining of the declaration value. |
.example {
font-family:"Droid Sans", "Helvetica Neue", Arial/*rtl:prepend:"Droid Arabic Kufi",*/;
}| Syntax | Description |
|---|---|
/*rtl:{value}*/ | Replaces the declaration value with {value}. |
.example {
font-size:16px/*rtl:14px*/;
}SASS/SCSS omit multi-line comments from the compiled CSS in compressed mode. https://sass-lang.com/documentation/syntax/comments#in-scss
However, If a comment begins with/*!, though, it will always be included in the CSS output.
SASS/SCSS will will also omit comments placed inside the declaration value from the output CSS.
To preserve RTLCSS value directives, Use SASS interpolation syntax passing your comment as string.
.example { font-size:16px #{"/*!rtl:14px;*/"}; }Moreover, depending on your setup the ending semicolon may get stripped from last declaration. Which will decouple it from the value directive.
To work around this, either ensure the last declaration has an ending semicolon or place the value directive before the declaration value.
.example { font-size: #{"/*!rtl:14px*/"}16px }
