SASS Math Calculation

Question

Cố gắng tạo một mạng lưới video đáp ứng. Thay vì sử dụng% khác nhau cho mỗi truy vấn phương tiện, tôi đã hy vọng sử dụng công thức SASS chuẩn tính toán dựa trên chiều rộng 100%, tuy nhiên không chắc chắn nếu SASS có thể làm điều này. 40 trong công thức dưới đây, có tính đến 2 x 20px lề cố định (tức là đây sẽ là lưới 3 cột).

công thức lý tưởng:

ul.videos { 
    li { 
    width: ((100%/3) - 40); 
    } 
} 

Bất kỳ cách nào mà CSS/Sass có thể xử lý này? Không muốn sử dụng JS nếu có thể.

Answer 1

Rất tiếc, bạn không thể trừ 40% từ 33%. SASS tạo ra một tệp CSS chuẩn để được trình duyệt hiểu, và tại thời điểm xây dựng SASS không biết kích thước của trình duyệt.

Tuy nhiên, bạn sẽ có thể đạt được hiệu quả mong muốn bằng cách sử dụng lợi nhuận CSS, ví dụ:

ul.videos { 
    li { 
    width: (100%/3); 
    div { 
     margin: 0 20px; 
    } 
    } 
} 

Answer 2

Điều này có thể trong all major browsers sử dụng calc().

Demo: http://jsfiddle.net/gb5HM/

li { 
    display: inline-block; 
    width: calc(100%/3 - 40px); 
} 

Tất nhiên, bạn vẫn có thể tuyên bố điều này trong một tập tin Sass nhưng đó là một giải pháp CSS tinh khiết. Nó không thể có trong SASS vì SASS không biết 100% là gì tại thời điểm biểu định kiểu được tạo ra, và giá trị pixel 100% có thể dao động khi tài liệu được thay đổi kích thước.

Spec: http://www.w3.org/TR/css3-values/#calc

Answer 3

Một giải pháp trình duyệt mới hơn sẽ được sử dụng flexbox display type. Nó dường như có một similar amount of support như calc() (thực sự chỉ là các trình duyệt rất hiện đại).

Sass hoặc cụ thể hơn là La bàn, sẽ được sử dụng ở đây vì nó có flexbox mixins.