Usage Guide

Your guide on how to use and make the most out of RTLCSS

Time is Priceless, Caffeine is Not! Buy Me a Coffee ☕

Value Directives

Value directives are placed any where inside the declaration value. They target the containing declaration node.

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

§Append

SyntaxDescription
/*rtl:append:{value}*/Appends {value} to the end of the declaration value.

§Example

.sample {
transform:rotate(45deg) /*rtl:append:scaleX(-1)*/;
}

§Ignore

SyntaxDescription
/*rtl:ignore*/Ignores processing of this declaration.

§Example

.code {
direction:ltr/*rtl:ignore*/;
}

§Insert

SyntaxDescription
/*rtl:insert:{value}*/Inserts {value} to where the directive is located inside the declaration value.

§Prepend

SyntaxDescription
/*rtl:prepend:{value}*/Prepends {value} to the begining of the declaration value.

§Example

.example {
font-family:"Droid Sans", "Helvetica Neue", Arial/*rtl:prepend:"Droid Arabic Kufi",*/;
}

§Replace

SyntaxDescription
/*rtl:{value}*/Replaces the declaration value with {value}.

§Example

.example {
font-size:16px/*rtl:14px*/;
}

§Tip

SASS/SCSS will 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*/"};
}

PREVNEXT