Tính toán chiều rộng từ phần trăm thành pixel rồi trừ đi theo pixel trong CSS ÍT

Tôi sẽ tính toán chiều rộng trong một số phần tử từ phần trăm đến pixel vì vậy tôi sẽ trừ -10px bằng cách sử dụng LESS và calc () . Nó có thể?

div {
    span {
        width:calc(100% - 10px);
    }
}

Tôi đang sử dụng CSS3 calc()nên nó không hoạt động:calc(100% - 10px)

Ví dụ: if 100% = 500px so width = 490px (500-10);

Tôi đã tạo bản demo để thử nghiệm: http://jsfiddle.net/4DujZ/55/

vì vậy padding sẽ luôn nói: 5 (10px / 2) khi tôi thay đổi kích thước.

Tôi có thể làm điều đó trong LESS ? Tôi biết cách thực hiện trong jQuery và CSS đơn giản như phần đệm lề hoặc cách khác ... nhưng tôi sẽ cố gắng thực hiện chức năng trong LESS vớicalc()

Bạn có thể thoát khỏi các calcđối số để ngăn chúng được đánh giá khi biên dịch.

Sử dụng ví dụ của bạn, bạn chỉ cần bao quanh các đối số, như sau:

calc(~'100% - 10px')

Demo: http://jsfiddle.net/c5aq20b6/

Tôi thấy rằng tôi sử dụng điều này theo một trong ba cách sau:

Thoát cơ bản

Mọi thứ bên trong các calcđối số được định nghĩa là một chuỗi và hoàn toàn tĩnh cho đến khi nó được đánh giá bởi máy khách:

LESS đầu vào

div {
    > span {
        width: calc(~'100% - 10px');
    }
}

Đầu ra CSS

div > span {
  width: calc(100% - 10px);
}

Nội suy các biến

Bạn có thể chèn một biến LESS vào chuỗi:

LESS đầu vào

div {
    > span {
        @pad: 10px;
        width: calc(~'100% - @{pad}');
    }
}

Đầu ra CSS

div > span {
  width: calc(100% - 10px);
}

Trộn các giá trị đã thoát và tổng hợp

Bạn có thể muốn thoát khỏi giá trị phần trăm, nhưng hãy tiếp tục và đánh giá điều gì đó khi biên dịch:

LESS đầu vào

@btnWidth: 40px;
div {
    > span {
        @pad: 10px;
        width: calc(~'(100% - @{pad})' - (@btnWidth * 2));
    }
}

Đầu ra CSS

div > span {
  width: calc((100% - 10px) - 80px);
}

Nguồn: http://lesscss.org/functions/#string-functions-escape .

Tôi nghĩ đó width: -moz-calc(25% - 1em);là những gì bạn đang tìm kiếm. Và bạn có thể muốn cung cấp cho Liên kết này để được hỗ trợ thêm

Hoặc, bạn có thể sử dụng thuộc tính margin như sau:

    {
    background:#222;
    width:100%;
    height:100px;
    margin-left: 10px;
    margin-right: 10px;
    display:block;
    }

Thử cái này :

width:auto;
margin-right:50px;