Làm thế nào để bạn loại bỏ các đơn vị đo lường từ một phương trình mixin Sass?

Question

Tôi đã viết một mixin Sass rất đơn giản để chuyển đổi giá trị pixel thành giá trị rem (xem Jonathan Snook's article on the benefits of using rems). Đây là mã:

// Mixin Code 
$base_font_size: 10; // 10px 
@mixin rem($key,$px) { 
    #{$key}: #{$px}px; 
    #{$key}: #{$px/$base_font_size}rem; 
} 

// Include syntax 
p { 
    @include rem(font-size,14); 
} 

// Rendered CSS 
p { 
    font-size: 14px; 
    font-size: 1.4rem; 
} 

Hỗn hợp này hoạt động khá tốt, nhưng tôi hơi không hài lòng với cú pháp bao gồm cho nó. Xem, tôi sẽ chuyển giá trị pixel vào câu lệnh include thay vì một số đơn giản. Đây là một chi tiết nhỏ, nhưng nó sẽ thêm ý nghĩa ngữ nghĩa vào câu lệnh bao gồm hiện không tồn tại. Dưới đây là những gì tôi nhận được khi tôi cố gắng chuyển giá trị pixel vào câu lệnh bao gồm:

// Include syntax 
p { 
    @include rem(font-size,14px); 
} 

// Rendered CSS 
p { 
    font-size: 14pxpx; 
    font-size: 1.4pxrem; 
} 

Khi Sass thấy giá trị pixel được chuyển vào phương trình, nó xuất ra 'px'. Tôi muốn loại bỏ đơn vị đo đó ra như thể tôi đang sử dụng parseFloat hoặc parseInt trong JavaScript. Làm thế nào để làm như vậy bên trong một mixin Sass?

Answer 1

Xóa các đơn vị khỏi một số được thực hiện bằng cách chia, giống như trong Đại số.

$base-font-size: 10px; 
$rem-ratio: $base-font-size/1rem; 

@mixin rem($key,$px) { 
    #{$key}: $px; 
    #{$key}: $px/$rem-ratio; 
} 


// Include syntax 
p { 
    @include rem(font-size,14px); 
} 

// Rendered CSS 
p { 
    font-size: 14px; 
    font-size: 1.4rem; 
} 

Các đơn vị trong Sass có thể được coi là toán học thực, vì vậy px/px/rem chuyển sang chỉ rem. Hãy tận hưởng nó!

Answer 2

Đây là chức năng bạn có thể sử dụng. Dựa trên Foundation chức năng trợ giúp toàn cầu.

@function strip-unit($num) { 

    @return $num/($num * 0 + 1); 
} 

sử dụng mẫu:

... Removed for brevity ... 

@mixin rem($key: font-size, $val) { 
    #{$key}: strip-unit($val) * 1px; 
    #{$key}: (strip-unit($val)/$base-font-size) * 1rem; 
}