Cách tốt nhất để trang web RTL với Sass!

Có rất nhiều cách để RTL trang web của bạn trên internet, nhưng không có cách nào dễ sử dụng.

Tôi đã phát triển một phương pháp dễ dàng và thuận tiện để hỗ trợ trang web đa ngôn ngữ, ngôn ngữ RTL cũng được hỗ trợ.

Trang web RTL với Sass

Ý tưởng

Trong tiếng Anh, việc căn chỉnh văn bản bắt đầu ở bên trái và kết thúc ở bên phải, nhưng trong các ngôn ngữ Semitic thì ngược lại, việc căn chỉnh văn bản bắt đầu ở bên phải và kết thúc ở bên trái.

Hãy nói rằng chúng tôi cần đệm khi bắt đầu thẻ

. Trong tiếng Anh, nó cần phải là padding-left: 10px và trong các ngôn ngữ Semitic, nó cần phải là padding-right: 10px, trong cả hai trường hợp này, chúng ta cần padding ở đầu dòng 10px.

Và từ đây, chúng tôi bắt đầu phương pháp tạo ra một phong cách phổ quát để bắt đầu hoặc kết thúc.

Theo cách tương tự, chúng tôi sẽ sử dụng nó cho vị trí, nổi, đệm, lề, viền và biến đổi CSS.

Làm thế nào để bắt đầu?

Đầu tiên: Tạo hai tệp cấu hình _direction-ltr.scss và _direction-rtl.scss.

Trong tệp LTR, nhập các biến sau:

/ *** Trang web LTR *** /
$ hướng: ltr;
$ ngược chiều: rtl;

$ start-direction: trái;
$ hướng cuối: đúng;

$ biến đổi hướng: 1;

Trong tệp RTL, nhập các biến sau:

/ *** Trang web RTL *** /
$ hướng: rtl;
$ ngược chiều: ltr;

$ start-direction: đúng;
$ end-direction: trái;

$ biến đổi-hướng: -1;

Thứ hai: Tạo / Cập nhật tệp SASS chính của bạn dưới dạng tệp bên trong, ví dụ: _main.scss.

Lưu ý: Tập tin chính không tập tin @import các tập tin cấu hình chỉ đường!

Làm thế nào để nhập tập tin chỉ đường?

Thêm hai tệp chính mới trong thư mục gốc, main-ltr.scss & main-rtl.scss.

Trong mỗi tệp chính @import, tệp hướng cấu hình chính xác + tệp _main.scss bên trong.

Ví dụ (chính-ltr.scss):

@import "config-direction / _direction-ltr.scss";
@import "_main.scss";

Ví dụ (main-rtl.scss):

@import "config-direction / _direction-rtl.scss";
@import "_main.scss";

Từ tệp này, bạn sẽ biên dịch hai tệp chính, main-ltr.css & main-rtl.css

Làm thế nào để sử dụng các biến?

Chỉ đường CSS & căn chỉnh văn bản:

Chỉ cần đặt các biến trong giá trị. $ start-direction cho các ngôn ngữ LTR là trái & đối với các ngôn ngữ Semitic (RTL) là đúng. $ direction cho tiếng Anh là ltr & cho ngôn ngữ Semitic là rtl.

thân hình{
  hướng: $ hướng;
  text-align: $ start-direction;
}

Vị trí CSS:

Trong Định vị, đặt bên phải và bên trái trong các biến theo nhu cầu của bạn.

Thí dụ:

vị trí: tuyệt đối;
# {$ hướng bắt đầu}: 50%;

CSS Margins / Paddings / Biên giới:

Thí dụ:

lề - # {$ end-direction}: 10px;
phần đệm - # {$ start-direction}: 10px;
viền - # {$ end-direction} -4: 2px;

Phao CSS:

float: $ start-direction;

Chuyển đổi CSS: translateX:

Khi làm việc với biến đổi, bạn cần thay đổi số từ dương sang âm hoặc ngược lại.

Hãy nói rằng chúng ta có hộp biến đổi: translateX (200px) bằng tiếng Anh. Chúng tôi nhân nó với $ Transform-direction (= 1), trong tiếng Anh, kết quả sẽ là 200px (1 * 200px), nhưng trong rtl, nó sẽ là -200px (-1 * 200px).

Thí dụ:

biến đổi: translateX (200px * $ Transform-direction);

Kết quả

Đó là nó! Chúng tôi đã thực hiện một phương pháp dễ dàng và thuận tiện cho các trang web RTL.

Một ví dụ về mã trong _main.scss:

thân hình{
  hướng: $ hướng;
  text-align: $ start-direction;
  phần đệm - # {$ end-direction}: 10px;
}

sẽ được biên dịch thành trong main-ltr.css:

thân hình{
  hướng: ltr;
  văn bản-align: trái;
  đệm-phải: 10px;
}

sẽ được biên dịch thành trong main-rtl.scss

thân hình{
  hướng: rtl;
  văn bản-align: đúng;
  đệm-trái: 10px;
}

Tóm lược

Đó là tất cả, Bây giờ bạn có một cách dễ dàng đến các trang web RTL.

Tôi hy vọng bạn đã thích bài viết này và học hỏi kinh nghiệm của tôi.

Nếu bạn thích bài viết này, bạn cũng có thể thích:
Kiến trúc CSS cho nhiều trang web với SASS

Elad Shechter, Nhà phát triển web chuyên về thiết kế và kiến ​​trúc CSS & HTML, làm việc tại Investing.com.

Bạn có thể liên hệ hoặc theo tôi:
Twitter của tôi
Facebook
LinkedIn

Bạn có thể tìm thấy tôi trong các nhóm Facebook của tôi:
Thạc sĩ CSS
Thạc sĩ CSS Israel