Sass bilan RTL veb-saytlarining eng yaxshi usuli!

Internetda veb-saytingizni RTL qilishning ko'plab usullari mavjud, ammo ulardan hech biri foydalanish oson emas.

Men RTL tillari qo'llab-quvvatlanadigan ko'p tilli veb-saytni qo'llab-quvvatlash uchun oson va qulay usulni ishlab chiqdim.

Sass bilan RTL veb-saytlari

Kontseptsiya

Ingliz tilida matni hizalamak chapdan boshlanib, o'ngdan boshlanadi, lekin semit tillarida buning teskarisi, matnning hizalanishi o'ngdan va chapdan boshlanadi.

Aytaylik,

tegining boshida to'ldirish kerak. Ingliz tilida u chapga to'ldirilishi kerak: 10px, semit tillarida esa o'ng tomonga to'ldirish kerak: 10px, ikkala holatda ham biz 10px qatorining boshida to'ldirishimiz kerak.

Va shu erdan boshlash yoki tugatish uchun universal uslubni yaratish usulini boshlaymiz.

Shunga o'xshash tarzda biz uni joylashish, suzish, to'ldirish, chegara, chegara va CSS-ni o'zgartirish uchun ishlatamiz.

Qanday boshlash kerak?

Birinchi: ikkita konfiguratsiya fayllarini yarating _direction-ltr.scss va _direction-rtl.scss.

LTR fayliga quyidagi parametrlarni kiriting:

/ *** LTR veb-saytlari *** /
$ yo'nalishi: ltr;
qarama-qarshi yo'nalish: rtl;

$ boshlang'ich yo'nalishi: chap;
$ so'nggi yo'nalish: o'ng;

$ o'zgartirish yo'nalishi: 1;

RTL fayliga ushbu parametrlarni kiriting:

/ *** RTL saytlari *** /
$ yo'nalishi: rtl;
qarama-qarshi yo'nalish: ltr;

$ boshlang'ich yo'nalishi: o'ng;
$ so'nggi yo'nalish: chap;

$ o'zgartirish yo'nalishi: -1;

Ikkinchi: Asosiy SASS faylingizni ichki fayl sifatida, masalan, _main.scss yarating / yangilang.

Eslatma: asosiy fayl @ ko'rsatmalar konfiguratsiya fayllarini import qilmaydi!

Yo'nalish fayllarini qanday import qilish kerak?

Ildiz katalogiga ikkita yangi asosiy fayl qo'shing, main-ltr.scss va main-rtl.scss.

Har bir asosiy faylda @import-ni to'g'ri konfiguratsiya yo'nalishi fayli + ichki _main.scss fayl.

Misol (main-ltr.scss):

@import "config-yo'nalishlar / _direction-ltr.scss";
@import "_main.scss";

Misol (main-rtl.scss):

@import "config-бағытlari / _direction-rtl.scss";
@import "_main.scss";

Ushbu fayldan siz ikkita asosiy faylni, ya'ni main-ltr.css va main-rtl.css kompilyatsiya qilasiz

O'zgaruvchini qanday ishlatish kerak?

CSS yo'nalishlari va matnni tekislash:

Faqat qiymatga o'zgaruvchilarni qo'ying. LTR tillari uchun $ boshlang'ich yo'nalishi chap, semit (RTL) tillari uchun esa to'g'ri. Ingliz tili uchun $ ltr ltr, semit tillari uchun esa rtl.

tanasi {
  yo'nalish: $ yo'nalish;
  matnni tekislash: $ start-direction;
}

CSS lavozimlari:

Joylashtirishda o'ngga va chapga ehtiyojlaringizga qarab o'zgaruvchini qo'ying.

Masalan:

lavozim: mutlaq;
# {$ start-direction}: 50%;

CSS chegaralari / to'ldirishlar / chegaralar:

Masalan:

marj - # {$ so'nggi yo'nalish}: 10px;
padding - # {$ start-direction}: 10px;
chegara - # {$ so'nggi yo'nalishi}-kengligi: 2px;

CSS-ning oqishi:

float: $ start-direction;

CSS-ni o'zgartirish: translateX:

Transform bilan ishlashda raqamni ijobiydan salbiyga yoki aksincha o'zgartirish kerak.

Aytaylik, bizda quti o'zgarishi mavjud: translateX (200px) ingliz tilida. Biz uni $ transformator yo'nalishiga (= 1) ko'paytiramiz, ingliz tilida natija 200px (1 * 200px), lekin rtl -200px (-1 * 200px) bo'ladi.

Masalan:

transform: translateX (200px * $ transformator yo'nalishi);

Natija

Bo'ldi shu! Biz RTL veb-saytlariga oson va qulay usul yaratdik.

_Main.scss-dagi kodga misol:

tanasi {
  yo'nalish: $ yo'nalish;
  matnni tekislash: $ start-direction;
  padding - # {$ so'nggi yo'nalishi}: 10px;
}

main-ltr.css-da kompilyatsiya qilinadi:

tanasi {
  yo'nalish: ltr;
  matnni tekislash: chap;
  padding-o'ng: 10px;
}

main-rtl.scss ichiga kompilyatsiya qilinadi

tanasi {
  yo'nalish: rtl;
  matnni tekislash: o'ng;
  padding-chap: 10px;
}

Xulosa

Bularning barchasi, endi siz RTL veb-saytlariga osonlik bilan murojaat qilishingiz mumkin.

Umid qilamanki, sizga ushbu maqola yoqdi va o'z tajribamdan bilib oldim.

Agar sizga ushbu maqola yoqsa, sizga yoqishi mumkin:
SASS bilan bir nechta veb-saytlar uchun CSS arxitekturasi

Elad Shechter, CSS va HTML dizayni va arxitekturasiga ixtisoslashgan, Investing.com saytida ishlaydigan veb-dasturchi.

Siz men bilan bog'lanishingiz yoki menga ergashishingiz mumkin:
Mening Twitter
Facebook
LinkedIn

Siz meni Facebook-dagi guruhlarimdan topishingiz mumkin:
CSS ustalari
CSS ustalari Isroil