Viết hàm Sass/Scss trả về một chuỗi

Question

Tôi đang cố tối ưu hóa các phép tính liên quan đến CSS bằng cách sử dụng hai hàm tiện ích tùy chỉnh trong Scss.

Một cho DTTS:

@function _em($wanted, $inherited) { 
    @return ($wanted/$inherited) + 'em'; 
} 

... và một cho tỷ lệ phần trăm:

@function _pc($wanted, $parent) { 
    @return (($wanted/$parent) * 100) + '%'; 
} 

... sau đó gọi điện cho họ inline:

body { 
    margin: _pc(40,1024); 
    font-size: _em(20,16); 
    line-height: _em(26,20); 
} 

Không những được trở về Tuy nhiên, chuỗi Nem hoặc N% được mong đợi. (Tôi nghĩ rằng đó là chuỗi nối của tôi - tức là dán tuyên bố đơn vị vào cuối tính toán - nhưng tôi không chắc chắn.)

Có ai có thể làm sáng tỏ những gì tôi đang làm không?

Answer 1

Thực ra, vấn đề của bạn là tên của mixin. Tôi mới phát hiện ra điều này, nhưng dường như bạn không thể bắt đầu một mixin với dấu gạch dưới.

này hoạt động: http://jsfiddle.net/B94p3/

@function -em($wanted, $inherited) { 
    @return ($wanted/$inherited) + 'em'; 
} 

@function -pc($wanted, $parent) { 
    @return (($wanted/$parent) * 100) + '%'; 
} 

p { 
    font-size: -em(40,16); 
} 

Answer 2

Tương tự như vậy, tôi đã viết chức năng này để chuyển đổi đơn vị px-rem.

Bạn có thể sửa đổi cho phù hợp.

$is-pixel: true; 
$base-pixel: 16; 

@function unit($value) { 
    @if $is-pixel == true { 
    $value: #{$value}px; 
    } @else { 
    $value: #{$value/$base-pixel}rem; 
    } 
    @return $value; 
} 

Bây giờ, người ta có thể sử dụng như sau

.my-class { 
    width: unit(60); 
    height: unit(50); 
}