Hàm Calc() bên trong một hàm calc() khác trong CSS

Question

Làm cách nào để sử dụng hàm CSS calc bên trong một hàm CSS calc khác? theo bài viết này ("https://developer.mozilla.org/en-US/docs/Web/CSS/calc") có thể nhưng không có ví dụ về điều đó.

Answer 1

Có thể sử dụng calc() bên trong một hàm calc() khác.

Một ví dụ:

div{ 
    width: calc(100% - (1% + 30px));/* calc(1% + 30px) is nested inside calc()*/ 
} 
div p{ 
    width: calc(100% - 30px);/*100% is total width of the div*/ 
} 

---

Cập nhật trên nested calc với các biến css:

.foo { 
    --widthA: 100px; 
    --widthB: calc(var(--widthA)/2); 
    --widthC: calc(var(--widthB)/2); 
    width: var(--widthC); 
} 

Sau khi tất cả các biến được mở rộng, giá trị widthC sẽ là calc (calc (100px/2)/2), sau đó khi nó được gán cho thuộc tính chiều rộng của .foo, tất cả calc bên trong() s (không có vấn đề như thế nào de eply lồng nhau) sẽ được làm phẳng thành chỉ dấu ngoặc đơn, do đó, giá trị của thuộc tính chiều rộng sẽ cuối cùng là calc ((100px/2)/2), tức là 25px. Trong ngắn hạn: một calc() bên trong của một calc() là giống hệt nhau chỉ là dấu ngoặc đơn.

Vì vậy, thông số hiện tại cũng chứng minh điều này bằng cách sử dụng dấu ngoặc đơn bên trong calc() là lồng nhau calc.

Tìm hiểu thêm về biến css here.

Answer 2

Tham chiếu bạn trích dẫn được thừa nhận là hơi khó hiểu.

Đó là không thể sử dụng một hàm calc bên calc khác.

Từ thông số kỹ thuật ở đây: http://dev.w3.org/csswg/css-values/#calc-notation

... Các thành phần của một biểu thức calc() có thể là các giá trị văn chương, attr() hoặc calc() biểu thức, hoặc giá trị ..

Bạn có thể có biểu thức calc bên trong các biểu thức, nhưng không phải là chính hàm calc().

Và một ví dụ được đưa ra trong đó ref cho các biểu thức lồng nhau:

width: calc(100%/3 - 2*1em - 2*1px); 

Và cũng cho nhiều calc cho nhiều thuộc tính:

margin: calc(1rem - 2px) calc(1rem - 1px); 

Cú pháp từ spec trên:

Cú pháp của hàm calc() là:

<calc()> = calc(<calc-sum>) 
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]* 
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]* 
<calc-value> = <number> | <dimension> | <percentage> | (<calc-sum>) 

Trường hợp kích thước < > là thứ nguyên.

Ngoài ra, khoảng trắng là bắt buộc trên cả hai mặt của toán tử + và - . (* Và/operaters có thể được sử dụng mà không có khoảng trắng xung quanh.)

UAs phải hỗ trợ biểu thức calc() ít nhất 20 cụm, trong đó mỗi NUMBER, DIMENSION hoặc PERCENTAGE là một thuật ngữ. Nếu biểu thức calc() chứa nhiều hơn số lượng cụm từ được hỗ trợ, nó phải được xử lý như thể nó không hợp lệ.

.

Answer 3

Tôi là một trong những người chỉnh sửa Giá trị & Thông số đơn vị, xác định calc().

calc() nên có thể lồng vào bên trong calc(). Có một sự giám sát trong ngữ pháp/định nghĩa trong một thời gian mà về mặt kỹ thuật không cho phép điều đó, nhưng gần đây tôi đã khắc phục điều đó. Triển khai chưa bắt kịp, với kiến ​​thức của tôi (tho nó trông giống như Chrome 51 và Firefox 48 sẽ có sự cố định này, woo!).

Điều đó nói rằng, có không lý do để lồng biểu thức calc() bình thường - chúng là giống hệt nhau chỉ bằng cách sử dụng dấu ngoặc đơn. Lý do duy nhất để làm điều đó là khi sử dụng các thuộc tính/biến tùy chỉnh.