hỗ trợ từ phải sang trái (RTL) trong dự án SASS

Question

Tôi tự hỏi liệu có thể tạo ra một mixin xử lý nhiều đối số như các thuộc tính cần được chuyển đổi thành rtl hay không. tôi muốn làm một cái gì đó giống như

.css-selector { 
    width: 300px; 
    height: 200px; 
    @include rtl { 
     padding: 10px 5px 3px 4px; 
     margin: 3px 8px 2px 5px; 
    } 
} 

với một mixin:

$rtl = false !default; 

@mixin rtl() { 
    @if $rtl { 
     dir: rtl; 
     @each $property in @content { 
      //check property if it's padding or margin or something 
       else rtl-related... if hit use rtl mixin 
      } 
    } 
    @else { @content; } 

} 

Tôi nghĩ rằng tôi nên phân tích @content, nhưng nó không hoạt động (không hợp lệ CSS sau" ... h $ bất động sản trong. ": biểu hiện mong đợi (ví dụ 1px, đậm), là" @content {)

Bây giờ tôi xử lý rtl với 2 vars:

$dir: left !default; 
$opdir: right !default; 

mà tôi thay đổi khi nó là rtl. Tôi sử dụng nó trong các tệp sass của tôi như

margin-#{$dir}: 15px; 

Nhưng tôi không nghĩ giải pháp này đủ linh hoạt. Và tôi cũng không muốn bao gồm một mixin riêng biệt cho mỗi tài sản css.

Ai đó có ý tưởng hay giải pháp tốt hơn? Mọi phản hồi chào mừng

Answer 1

Điều gì về một thứ như @mixin với các thông số tùy chọn sẽ được sử dụng với bất kỳ bộ chọn CSS nào.

@mixin rtl ($padding:"", $margin:"", $width:"", $height:""){ 
    padding:$padding; 
    margin:$margin; 
    width:$width; 
    height:$height; 
    direction:rtl; 
} 

Bây giờ cho phép nói rằng bạn có một bộ chọn CSS gọi là "mySelector" và bạn chỉ muốn thay đổi đệm và chiều rộng ...

.mySelector { 
    @include rtl(5px, "", 50%); 
    font-size:1em; 
    color:#333; 
} 

Answer 2

không phải là phương pháp tương tự, nhưng bi-app-sass sẽ giải quyết Vấn đề rtl, và nó sẽ tạo ra 2 bản định kiểu khác nhau cho bạn

sau khi tạo các tệp cần thiết (được giải thích trong liên kết ở trên), tất cả những gì bạn phải làm là gọi mixin được xác định trước cho thuộc tính trái/phải (Float, biên giới, lợi nhuận, đệm, text-align ...)

.foo { 
    @include float(left); 
    @include border-left(1px solid white); 
    @include text-align(right); 
} 

cũng có một cổng của dự án này cho ngôn ngữ ít

• bi-app-less

---

Cập nhật

bằng bi-app-sass có rtl & ltr mixins có điều kiện đó là hữu ích để xử lý trường hợp đặc biệt, xem ví dụ sau

.something { 
    @include ltr { 
     // anything here will appear in the ltr stylesheet only 
     background-image: url('app-ltr.jpg'); 
    } 
    @include rtl { 
     // for rtl sheet only 
     background-image: url('app-rtl.jpg'); 
     margin-top: -2px; 
    } 
} 

Lưu ý rằng tính năng này không được hỗ trợ trong bi-app-less

Answer 3

Sau đây nhập khẩu SCSS cho biết thêm một số biến hữu ích, chức năng và mixin.

View on GitHub

Read more

// Override default value for $dir in directional.scss 
$dir: rtl; 

// Import helpers from directional.scss 
@import "directional"; 

// Use the helpers to make CSS for LTR or RTL 
body { 
    text-align: $left; 
    padding-#{$right}: 1em; 
    margin: dir-values(0 2em 0 1em) if-ltr(!important); 
} 

Answer 4

tôi sẽ đề nghị sử dụng một mixin duy nhất mà có thể dễ dàng xử lý cả hai trường hợp bao gồm. selectors lồng nhau:

_mixin.sass:

$isRLT: true; 

@mixin rtl { 
    @if $isRLT { 
    @if & { 
     & { 
     @content; 
     } 
    } 
    @else { 
     @content; 
    } 
    } 
} 

_main.sass:

.test { 
    float: left; 
    padding: 5px 5px 0px; 

    @include rtl { 
    padding: 5px 0px 0px 5px; 
    } 
} 

core.scss

// include all your libraries 
@import '_mixin'; 
@import '_main'; 

Điều này sẽ tạo ra các tập tin mà không rtl.

Đối với kiểm tra thông tin hơn nữa =>https://github.com/davidecantoni/sass-rtl-mixin