تکنیک های استفاده از ماژول Gulp RTL CSS

در مواقعی که از RTL CSS در Gulp استفاده میشود تمامی verbe های دارای جهت در CSS را برعکس میکند و طراح دیگر درگیر ساخت فایل های مختلف برای هر زبان نمیشود.

اما مواقعی نیاز هست که برخی قسمت های فایل اصلی نگه داشته و برعکس نشود. یا حتی در نسخه LTR به چیز دیگری ترجمه شود.

-- Directive ها در Gulp RTL

Ignore کردن یک خط:

از /*rtl:ignore*/ برای ignore کردن خط بعد استفاده میشود.

 .className {
    /*rtl:ignore*/
    text-align: right;
}

Ignore کردن یک :

از /*rtl:begin:ignore*/ برای مشخص کردن شروع محدوده و از /*rtl:end:ignore*/ برای مشخص کردن پایان محدوده استفاده میشود و هر چیزی که در بین این دو comment باشد در خروجی ظاهر نمیشود.

.className {
    /*rtl:begin:ignore*/
    text-align: right;
    direction: rtl:
    /*rtl:end:ignore*/
}

تغییر مقدار یک خصوصیت در نسخه برعکس شده :

گاهی اوقات نیاز است که در نسخه برعکس شده از مقدار جدید برای یک خصوصیت استفاده کرده از /*rtl:14px*/ استفاده میشود.

.className {
font-size: 14px; /*rtl:18px*/
}

همچنین با /*rtl:prepend:{value}*/ و /*rtl:append:{value}*/ میتوان به ترتیب مقدار هایی را به اول مقدار فعلی و به آخر مقدار فعلی اضافه کرد.

در SASS برای استفاده از این امکان باید از Interpolation استفاده کرد. {YOUR_DIRECTIVE}#

حذف یک مقدار:

برای حذف یک مقدار در نسخه برعکس شده از /*rtl:remove*/ استفاده میشود.

.className{
    text-align: right;
    /*rtl:remove*/
    float: right;
}

تغییر نام یک کلاس:

برای تغییر verb های جهت در css خود میتوانید از /*rtl:rename*/ استفاده کنید. این directive از کلمه های right, left, rtl, ltr,next, prev پشتیبانی میکند برای مثال در زیر float-right به float-left تغییر نام پیدا میکند.

/*rtl:rename*/
.float-right {
    float: right;
}