Trừ pixel từ phần trăm trong SASS?

Question

Tôi biết bạn có thể thực hiện một số phép toán đơn giản trong Sass/Scss. Nhưng có cách nào để trừ điểm ảnh theo tỷ lệ phần trăm không? Ví dụ:

$image-size: 200px; 

.bio { 
    width: 100% - $image-size; 
} 

Answer 1

Tôi không thấy điều đó sẽ hoạt động như thế nào, thực tế là SASS không thể biết được kích cỡ hộp của bạn một cách kỳ diệu.

Bây giờ nếu tôi nhận được những gì bạn đang cố gắng làm, giải pháp tốt nhất là để bọc chiều rộng của .box thành một biến và sau đó trừ chiều rộng hình ảnh của bạn vào biến đó - xem xét 100% chiều rộng có nghĩa là nó sẽ nhận được 100% một chiều rộng nhất định.

Answer 2

Bạn có thể sử dụng chức năng calc() để nhận được những gì bạn muốn. Đó là thử nghiệm nhưng vẫn còn pretty good supported bởi các trình duyệt khác nhau.

Với Sass, bạn có thể tạo một calc mixin để có được điều này làm việc trên các phiên bản trình duyệt hơn với -webkit và -moz tiền tố (không cần của Opera một):

@mixin calc($key, $value) { 
    #{$key}: -webkit-calc(#{$value}); 
    #{$key}: -moz-calc(#{$value}); 
    #{$key}: calc(#{$value}); 
} 

Và gọi nó với một cái gì đó như:

.bio { 
    @include calc("width", "100% - #{$image-size}"); 
}