Có thể thực hiện toán học bên trong CSS không?

Question

Tôi có id accorion jquery #accordion và một số nội dung bên trong tên lớp tiêu đề .simpleColor. Bây giờ tôi muốn đưa ra một biên độ tính toán cho .simpleColor. Trong giả ... trông giống như thế này,

.simpleClass { 
    margin-left: ((#accordion.width/2) - (.simpleColor.width/2)); 
} 

Tôi mở để sử dụng bất kỳ công nghệ nào khác như javascript để đạt được điều này nếu có thể.

Answer 1

Có một chức năng CSS gọi calc rằng đang bắt đầu nhận được hỗ trợ khá tốt. Cú pháp làm việc như sau:

width: calc(50% - 100px); 

(Lưu ý rằng khoảng trắng xung quanh các nhà khai thác có ý nghĩa)

này cho phép hỗ trợ tính toán động đúng trong CSS. Với bộ tiền xử lý, bạn chỉ có thể kết hợp các độ dài tĩnh với độ dài tĩnh và độ dài tương đối với các độ dài tương đối.

Calc được hỗ trợ từ Chrome 19, Firefox 4 và IE9. Tính năng này không được hỗ trợ khá rộng rãi, đủ để sử dụng nó rộng rãi, nhưng nó sẽ không quá xa trong tương lai và đó là điều cần nhớ và mong đợi.

Answer 2

Nếu bạn đang mở để sử dụng công nghệ khác, hãy thử sử dụng ít: http://lesscss.org/

Answer 3

jQuery('.simpleClass').css('margin-left', (jQuery('#accordian').width()/2) - (jQuery('.simpleColor').width()/2) + 'px'); 

nên làm những gì bạn đang muốn. Nhưng bạn cần phải làm một cái gì đó như thế này trong javascript, bạn không thể làm điều đó trong CSS tinh khiết trừ khi độ rộng cho #accordian và .simpleColor được biết trước (và do đó tính toán trước).

Answer 4

Không thể thực hiện các phép toán trong CSS một cách tự nhiên. Bạn có thể sử dụng JavaScript để thay đổi thuộc tính CSS khi tải trang, nhưng đây là một nỗi đau và phải được thực hiện mỗi lần tải trang làm cho trang của bạn chậm.

Bạn sẽ cần sử dụng bộ tiền xử lý CSS như LESS, Stylus hoặc SASS.

Tiền thưởng khi sử dụng một trong các ngôn ngữ này là bạn có thể tạo các bảng định kiểu CSS thực tế từ chúng. Bạn cũng nhận được lợi ích như chức năng, mixin, biến, và nhiều hơn nữa.

Answer 5

Tôi tin rằng CSS phải là định nghĩa kiểu thuần túy. Tôi không thích kết hợp một số tính toán với điều đó. Tôi sẽ làm điều đó trong javascript tôi

var accWidth=parseInt($("#accordion").css("width").replace("px","")); 
var simpWidth=parseInt($(".simpleColor").css("width").replace("px","")); 
var marginLeft=((accWidth/2)-(simpWidth/2));  
$(".simpleClass").css("margin-left",marginLeft); 

mẫu Làm việc http://jsfiddle.net/mzTRw/19/

Answer 6

Xem ví dụ này .. Anh ấy đã sử dụng nhiều phép tính trong css.

http://codepen.io/schoenwaldnils/pen/DLiyr