Biên dịch ít tích cực hơn với CSS3 calc

336

Các trình biên dịch ít hơn mà tôi đang sử dụng ( OrangeBits và dotless 1.3.0.5 ) đang dịch mạnh mẽ

body { width: calc(100% - 250px - 1.5em); }

vào

body { width: calc(-151.5%); }

Mà rõ ràng là không mong muốn. Tôi tự hỏi liệu có cách nào để báo hiệu cho trình biên dịch Ít hơn về cơ bản bỏ qua thuộc tính trong quá trình biên dịch. Tôi đã tìm kiếm thông qua Tài liệu ít hơn và tài liệu của cả hai trình biên dịch và tôi không thể tìm thấy gì.

Có ít hay ít trình biên dịch hỗ trợ này?

Nếu không, có một bộ mở rộng CSS nào không?

— Nick Babcock
nguồn

9

Bạn có chắc chắn không muốn một trình biên dịch bớt căng thẳng?

— fiatjaf

Tôi cũng rất chắc chắn, muốn trình biên dịch mạnh mẽ hơn! (phủ định kép trong nhận xét trước làm tôi bối rối;)) (vì vậy phiếu bầu của tôi cũng cho tính năng hay bên dưới)

— Andreas Dietrich

530

Ít hơn không còn đánh giá biểu thức bên trong calctheo mặc định kể từ đó v3.00.

Câu trả lời gốc ( Less v1.x...2.x):

Làm cái này:

body { width: calc(~"100% - 250px - 1.5em"); }

Trong Ít hơn 1.4.0, chúng ta sẽ có một strictMathstùy chọn yêu cầu tất cả các phép tính Ít hơn nằm trong dấu ngoặc, do đó, calcsẽ hoạt động "ngoài luồng". Đây là một lựa chọn vì nó là một thay đổi lớn. Theo mặc định, phiên bản 1.4.0 có tùy chọn này theo mặc định. Phiên bản phát hành đã tắt theo mặc định.

— Trang Luke
nguồn

2

Lưu ý rằng nếu bạn đang biên dịch ít hơn với giờ nghỉ của twitter thì nó sẽ bỏ qua việc thoát này . Ít nhất là tại thời điểm viết bình luận này.

— Attila Fulop

1

Tôi chỉ thử calc(100% - 50px)trong less.css 1.4.0 và kết quả là calc(50%). Thủ ~"..."thuật tuyệt vời tiếp tục phát huy tác dụng, nhưng tôi bối rối trước câu nói "ngoài luồng", khiến tôi nghĩ những điều trên sẽ có hiệu quả. Luke, làm thế nào để hỗ trợ cho calcsự thay đổi trong Ít 1.4.0? Cảm ơn!

— Brian M. Hunt

2

Câu hỏi đặt ra là tại sao less.js lại cố gắng tính toán điều này ngay từ đầu? Nó sẽ gây ra lỗi cho "100% - 250px" vì nó không thể tính được câu trả lời hợp lý.

— mở

72

Đối với những người đọc trong tương lai, bạn cũng có thể thoát khỏi toán tử, cho phép bạn sử dụng các biến. Ví dụ:calc(@somePercent ~"-" @someLength)

— 0b10011

10

Thay vì ít tính toán sai này hoặc ném lỗi tại sao nó không thể nhận ra những gì người dùng đang cố gắng làm và để nó một mình? Rõ ràng là một tỷ lệ phần trăm và giá trị pixel không thể được tính toán cùng nhau.

— dfmiller

37

Một usecase rất phổ biến của calc là chiếm 100% chiều rộng và thêm một số lề xung quanh phần tử.

Người ta có thể làm như vậy với:

@someMarginVariable = 15px;

margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);

— Sebastien Lorber
nguồn

-o-calc- chưa được hỗ trợ .

— một

28

Có một số tùy chọn thoát với cùng kết quả:

body { width: ~"calc(100% - 250px - 1.5em)"; }
body { width: calc(~"100% - 250px - 1.5em"); }
body { width: calc(100% ~"-" 250px ~"-" 1.5em); }

— icl7126
nguồn

9

Có một cách gọn gàng hơn để bao gồm các biến bên trong calc đã thoát, như được giải thích trong bài viết này: Hàm calc3 (CSS3) không hoạt động với Ít hơn # 974

@variable: 2em;

body{ width: calc(~"100% - @{variable} * 2");}

Bằng cách sử dụng dấu ngoặc nhọn, bạn không cần phải đóng và mở lại dấu ngoặc kép.

— brohr
nguồn