Sass tính phần trăm trừ px

Tôi muốn có thể làm như sau:

height: 25% - 5px;

Rõ ràng khi tôi làm điều đó tôi nhận được lỗi:

Incompatible units: 'px' and '%'.

Sass không thể thực hiện số học trên các giá trị không thể chuyển đổi từ đơn vị này sang đơn vị tiếp theo. Sass không có cách nào để biết chính xác "100%" rộng bao nhiêu về mặt pixel hay bất kỳ đơn vị nào khác. Đó là điều mà chỉ trình duyệt mới biết.

Bạn cần sử dụng calc()thay thế. Kiểm tra tính tương thích của trình duyệt trên Tôi có thể sử dụng ...

.foo {
    height: calc(25% - 5px);
}

Nếu các giá trị của bạn nằm trong các biến, bạn có thể cần sử dụng phép nội suy biến chúng thành các chuỗi (nếu không Sass chỉ cố gắng thực hiện số học):

$a: 25%;
$b: 5px;

.foo {
  width: calc(#{$a} - #{$b});
}

Có một calcchức năng trong cả SCSS [compile-time] và CSS [run-time]. Bạn có khả năng gọi cái trước thay vì cái sau.

Vì các lý do rõ ràng, các đơn vị trộn sẽ không hoạt động trong thời gian biên dịch, nhưng sẽ vào thời gian chạy.

Bạn có thể buộc cái sau bằng cách sử dụng unquotehàm SCSS.

.selector { height: unquote("-webkit-calc(100% - 40px)"); }

$var:25%;
$foo:5px;
.selector {
    height:unquote("calc( #{$var} - #{$foo} )");
}

NẾU bạn biết chiều rộng của container, bạn có thể làm như thế này:

#container
  width: #{200}px
  #element
    width: #{(0.25 * 200) - 5}px

Tôi biết rằng trong nhiều trường hợp, #container có thể có chiều rộng tương đối. Sau đó, điều này sẽ không làm việc.

Xin lỗi vì đã phục hồi chủ đề cũ - Độ căng của la bàn với: sau bộ chọn giả có thể phù hợp với mục đích của bạn - ví dụ: nếu bạn muốn div lấp đầy chiều rộng từ trái sang (50% + 10px) màn hình bạn có thể sử dụng (theo cú pháp thụt lề SASS):

.example
    background: red
    +stretch(0, -10px, 0, 0)
    &:after
        +stretch(0, 0, 0, 50%)
        content: ' '
        background: blue

Phần tử: sau khi lấp đầy 50% ở bên phải .example (để lại 50% khả dụng cho chiều rộng của .example), sau đó .example được kéo dài đến chiều rộng đó cộng thêm 10px.

Chỉ cần thêm giá trị phần trăm vào một biến và sử dụng #{$variable} ví dụ

$twentyFivePercent:25%;
.selector {
    height: calc(#{$twentyFivePercent} - 5px);
}