ورودثبت‌ نام

رادکام

تکنیک های استفاده از ماژول 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;
}
28 شهریور 1396

3,015بازدید

دیدگاه کاربران

هنوز دیدگاهی ثبت نشده است.

شما می‌توانید درباره این مقاله، دیدگاه خود را ثبت کنید.