Thuộc tính CSS động trong LESS?

Question

Tôi đang viết một bản định kiểu ít hơn cho một trang web hai chiều và tôi cần phải viết một tệp nhỏ hơn và tạo hai biểu định kiểu khác nhau cho bố cục từ trái sang phải (ltr) và bố cục khác cho bố cục từ phải sang trái (rtl)

nên khi tôi làm stylist cho bố trí rtl, tôi muốn chuyển đổi tất cả các giá trị còn lại để thể đúng, khô héo nó là một phao, đệm hoặc lề,

để làm như vậy, tôi đã xác định các yêu cầu các biến ở đầu tệp ít hơn của tôi như sau:

@left: right; 
@right: left; 

đơn giản, tôi có thể nổi các phần tử động như s

float: @left; // this will be floated to left in ltr layout while it will be right in rtl layout. 

nhưng vấn đề của tôi là tôi muốn có thể cũng sử dụng các biến này để tạo ra tính năng động, ví dụ như khi định vị các yếu tố hoàn toàn, hoặc tương đối, tôi muốn để có thể viết left hoặc right sở hữu động tùy thuộc vào giá trị của biến @left như sau

position: relative; 
@left: 10px; 

nhưng điều này mang lại một lỗi trên biên dịch, bất kỳ đầu mối làm thế nào để làm điều đó, Lưu ý rằng tôi đã làm điều này bằng Sass, nhưng cho đến bây giờ tôi không thể có được nó làm việc với LESS?

Answer 1

Dưới đây là giải pháp cho phép bạn viết kiểu của bạn một lần bằng cách sử dụng LESS, sau đó biên dịch chúng thành hai bản định kiểu CSS khác nhau cho cả bố cục rtl và ltr.

về cơ bản chúng tôi sẽ có ba file ÍT (họ có thể nhiều hơn nữa!):

style-ltr.less // this where we hold the rtl variables 
style-rtl.less // rtl variables 
main.less  // here we'll write our styles 

trong style-ltr.less xác định các biến sau:

@left: left; 
@right: right; 

@import "main.less"; 

trong khi ở style-rtl.less họ sẽ có các giá trị sau :

// reflect variables 
@left: right; 
@right: left; 

@import "main.less"; 

hiện đang ở main.less, chúng tôi sẽ xác định mixins sau

.left(@distance) when (@left = left) { 
    left: @distance; 
} 
.left(@distance) when (@left = right) { 
    right: @distance; 
} 
.right(@distance) when (@right = right) { 
    right: @distance; 
} 
.right(@distance) when (@right = left) { 
    left: @distance; 
} 

// now we can style our elements using these mixins 
div.something { 
    position: relative; 
    .left(10px); 
    float: @left; 
} 

bây giờ tất cả chúng ta phải làm là đưa style-rtl.less trong trang rtl bao gồm (hoặc phiên bản css biên soạn), cũng như để bao gồm style-ltr.less trong trang lít, và div.something sẽ được thả sang trái trên các trang ltr, trong khi nó sẽ được thả sang bên phải trên các trang rtl

Lưu ý rằng bạn có thể xác định padding, margin, border-radius ...etc. bằng cách sử dụng cùng một cách ở đây.

CẬP NHẬT

Tôi tạo ra hai dự án trên github để giúp xây dựng một bi-directional ứng dụng

• bi-app-less
• bi-app-sass

Điểm Uy Tín:

lấy cảm hứng từ người bạn thân của tôiVictor Zamfir

Answer 2

Cập nhật: Hãy xem Guard Expressions trong LESS - có lẽ đây có thể giúp một chút, bạn có thể tạo báo cáo kinda có điều kiện nhưng bạn phải sử dụng mixins ..

Tôi hiểu quan điểm của bạn, nhưng mặt khác tay tôi sẽ tiếp cận vấn đề này một cách khác nhau. Đây là một mất đơn giản - bạn xác định các biến cho sự khác biệt trong cả hai trường hợp, và sau đó nhập như bạn muốn - ví dụ, nơi ở master-lít/master-rtl và nhập phần còn lại của stylesheet sau:

// master-ltr.less 
// LTR: 
@sidebar-pos-left: 10px; 
@sidebar-pos-right: 0px; 
@content-float: left; 
... 
@import 'styles.less'; 

// your styles.less would have: 
.content { 
    float: @content-float; 
    ... 
} 
.sidebar { 
    position: relative; 
    left: @sidebar-pos-left; 
    right: @sidebar-pos-right; 
    ... 
} 

.. hoặc có thể hiệu quả hơn - tạo tập tin riêng biệt với vars-ltr/rtl, và sau đó nhập vào master-ltr/rtl của bạn.

Không chắc chắn bố cục phức tạp đến mức nào, nhưng có lẽ điều này mang lại cho bạn thứ gì đó bạn có thể sử dụng?

---

Tôi đã thử này sử dụng String Interpolation nhưng có vẻ như các biến có thể được chỉ nhúng ở phía bên "biến" của định nghĩa. Tôi có thể sai ở đây, có thể mọi người biết cách đạt được nó.

Tôi sẽ làm điều đó một chút khác biệt, không phải vì nó không thể với LESS, nhưng vì tổ chức mã và phương pháp tiếp cận tổng quát hơn (nó không tốt để đặt tên một cái gì đó "trái" khi đôi khi nó sẽ thực sự " đúng" :)

Đối với vấn đề thứ hai của bạn với position:relative, đây là quan điểm của tôi:

<div class="element element-ltr">...</div> 

.element { 
    position: relative; 
    &.element-ltr { 
    left: @element-side-position; 
    } 
    &.element-rtl { 
    right: @element-side-position; 
    } 
} 

giải pháp Đó là kinda OK, nhưng nếu bạn stylesheet là rất lớn, bạn sẽ kết thúc với rất nhiều các lớp bổ sung cho -ltr và -rtl. Không thực sự là một nỗi đau lớn nhưng bạn thực sự có thể làm cho nó hữu ích hơn bằng cách mở rộng phạm vi của -ltr/-rtl vào các thùng chứa cha mẹ (như header/content/sidebar/footer) và sau đó điều chỉnh từ đó. Chúng có thể có nhiều điểm chung, như màu nền, màu sắc, kích thước phông chữ .. và bạn sẽ chỉ làm việc trên các khác biệt trong các phiên bản -ltr/-rtl của chúng.

Ngoài ra, hãy đọc trên LESS Namespaces, chúng có thể cung cấp cho bạn nhiều quyền hạn hơn nữa về tổ chức.

Hy vọng điều này sẽ hữu ích!

Answer 3

Nếu bạn đang sử dụng DotLess, có cái gì đó thú vị hơn có thể được sử dụng thay cho việc xác định một số hữu hạn các mixins đây.

Nó được tích hợp sẵn dưới dạng plugin RTL.

https://github.com/dotless/dotless/wiki/Plugins

dotless.Compiler.exe -p:Rtl:forceRtlTransform=true,onlyReversePrefixedRules=false file.less 

Answer 4

Bạn có thể kiểm tra thư viện này: https://github.com/DevelopmentIL/direction.less

Nó có hỗ trợ lớn đối với nhiều css-quy tắc. Ví dụ:

@direction: rtl; // use `rtl` or `ltr` 
@import "direction.less"; 

body { 
    .direction(); 
} 

.float { 
    .float(); 
} 

.box { 
    display: inline-block; 
    .margin-left(4px); 
    .padding-right(1em); 
} 

Will đầu ra:

body { 
    direction: rtl; 
} 

.float { 
    float: right; 
} 

.box { 
    display: inline-block; 
    margin-right: 4px; 
    padding-left: 1em; 
}